通过jQuery将动态生成的输入值传递到隐藏输入中

Pass dynamically generated input value into hidden input via jQuery

本文关键字：输入 值传 隐藏 jQuery 动态 通过      更新时间：2023-11-14

我需要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脚本，但它们似乎对我不起作用，因为输入值和图像都是动态生成的，我不知道如何通过单击相应的图像将特定值插入到隐藏的输入中。

如有任何帮助，我们将不胜感激。

谨致问候。

这里是fiddle的链接，它可以根据您的意愿工作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，因为它们不是唯一的，在这种方法中你不需要它们。并使隐藏名可见，这样您就可以在演示中看到它（当您将其隐藏时，它的行为也会相同）：

<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标记中获取数据字段。您可以使用数据属性将一些信息发送到您的javascripthttp://www.w3schools.com/tags/att_global_data.asp这是一种比旁边有额外的隐藏输入更现代的方法

这是一种非常简单的方法，而且非常健壮，独立于ID，您可以控制它将在哪些图像上工作，哪些图像将不工作（通过添加clickableImage类）。理论上，它应该适用于任何html标签，而不仅仅是图像。它是干净的，因为你的动态值和图像在一个html标签中，你不必有两个，所有信息都是自包含的。

附言：您需要为此包含jQuery javascript框架。

Id必须是唯一的
这将在输入上没有id="prefix"和id="logoimage"的情况下工作。

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

小提琴

相关文章：