通過jQuery將動態生成的輸入值傳遞給隱藏的輸入

Question

我需要jQuery解決方案的幫助，以將動態生成的值傳遞給隱藏的輸入：

    <input type="hidden" id="hideme" value="">

動態生成的值是：

    <?php $sql=mysql_query("SELECT * FROM table"); ?>
    <?php while($rows = mysql_fetch_array($sql)) { ?>                       
    <input type="hidden" name="prefix" id="prefix" value="<?php echo $rows['CardPrefix']; ?>">
    <input type="image" id="logoimage" src="/assets/uploads/<?php echo $rows['Logo']; ?>" />
    <?php } ?>

我嘗試了一些StackOverflow的jQuery腳本，但由於輸入值和動態生成的圖像，它們似乎對我不起作用，我無法弄清楚如何通過單擊相應的圖像將特定的值插入隱藏的輸入中。

任何幫助將不勝感激。

問候。

Answer 1

這里是您想要的小提琴的鏈接， http：//jsfiddle.net/xqn6v6wp/

$( document ).ready(function() {
  $(".clickableImage").click(function(event) {
    var dynamicValue = $(this).data('dynamic');
    alert('Button pressed with value: '+dynamicValue);
    $('#hideme').val(dynamicValue);
  });
});

我擺脫了ID在您的圖像中，因為它們不是唯一的，並且您不需要這種方法。 並使Hideme可見，以便您可以在此演示中看到它（將其隱藏時的行為相同）：

<input id="hideme" value="">

<input class="clickableImage" type="image" src="/assets/aaa" data-dynamic="1"/>
<input class="clickableImage" type="image" src="/assets/bbb" data-dynamic="20"/>
<input class="clickableImage" type="image" src="/assets/ccc" data-dynamic="333"/>

這是一種更具動態性的方法，我為每個圖像提供了一個clickableImage類，然后在javascript中為其附加了一個事件（因此您可以將1或100設置為相同的代碼）。 在事件處理程序內部，我將從單擊的html標記內部獲取數據字段。 您可以使用data-attribute屬性將某些信息發送到javascript http://www.w3schools.com/tags/att_global_data.asp。這種方法比在其旁邊具有額外的隱藏輸入要現代得多。

這是一種非常簡單的方法，並且非常健壯，與ID無關，您可以控制將要使用的圖像，以及不能使用的圖像（通過添加clickableImage類）。 從理論上講，它應該適用於任何html標簽，而不僅僅是圖像。 這很干凈，因為您的動態值與圖像一起放在一個html標記中，您不必擁有兩個圖像，並且所有信息都是自包含的。

PS：您將為此需要包括jQuery javascript框架。

Answer 2

ID必須是唯一的 。
這將在輸入上沒有id="prefix"和id="logoimage"情況下id="logoimage" 。

$('input[type="image"]').on("click", function() {
    $("#hideme").val($(this).prev("input").val());
});

小提琴