javascript - 如何通过单击java脚本中动态创建的按钮来获取动态创建的文本框的值

Question

在我的 index.php 中，我有 div#card，它是在从数据库获取值后，在 div#contents 中由 php 动态创建的。但是，当我单击两个按钮中的任何一个以在 javascript 中获取这些值时，它只会获取第一个 div#card 的输入值。我希望如果我点击一个按钮，它会在它的父 div#card 元素中获取输入值。

索引.php

<div id='contents'>
    <div id='card'>
        <input id='p_id' type='hidden' value='1' name='productID' />
        <input id='name' type='text' value='Toshiba' name='product_name' />
        <input id='qty' type='text' value='1' name='qty' />
        <button id='1' class='get' name='get'>Get</button>
    </div>
    <div id='card'>
        <input id='p_id' type='hidden' value='2' name='productID' />
        <input id='name' type='text' value='Dell' name='product_name' />
        <input id='qty' type='text' value='3' name='qty' />
        <button id='2' class='get' name='get'>Get</button>
    </div>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.get').click(function() {
        var id = $('#p_id').val();
        var pname = $('#name').val();
        var qty = $('#qty').val();

        $.ajax({
            type: 'post',
            url: 'action.php',
            data: {
                'name': pname,
                'id': id,
                'qty': qty
            },
            success: function(response) {
                alert(response);
            }
        });
    });
});
</script>

Action .php

<?php 
      echo "there are ".$_POST['qty']." ".$_POST['name']." in the database";
?>

Answer 1

不要对多个元素使用相同的 ID。 id 用于引用单个元素。如果你想用相同的名称对元素进行分组，请使用 class 并且对于输入元素，请使用 name 而不是 id 或 class。您可以从其名称中获取值。

$(document).ready(function() {
    $('.get').click(function() {
        var id = $(this).siblings("input[name='p_id']").val();
        var pname = $(this).siblings("input[name='name']").val();
        var qty = $(this).siblings("input[name='qty']").val();
        var data = {
            'name': pname,
            'id': id,
            'qty': qty
        };
        console.log(JSON.stringify(data));
        $.ajax({
            type: 'post',
            url: 'action.php',
            data: data,
            success: function(response) {
                alert(response);
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='contents'>
   <div class='card'>
      <input name='p_id' type='hidden' value='1' name='productID' />
      <input name='name' type='text' value='Toshiba' name='product_name' />
      <input name='qty' type='text' value='1' name='qty' />
      <button id='1' class='get' name='get'>Get</button>
   </div>
   <div class='card'>
      <input name='p_id' type='hidden' value='2' name='productID' />
      <input name='name' type='text' value='Dell' name='product_name' />
      <input name='qty' type='text' value='3' name='qty' />
      <button id='2' class='get' name='get'>Get</button>
   </div>
</div>