Question

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

的index.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="p_id"使用class="p_id"，而是针对您在HTML标记中重复ID的所有情况执行此操作。

完成后，您可以在脚本中执行以下操作：

$(document).ready(function(){
            $('.get').click(function(){

                    //This is to get the container div of the clicked button so we can work only within it
                    var context = $(this).parent();

                    //Look at the second parameter of the jQuery selector
                    var id = $('.p_id', context).val();
                    var pname = $('.name', context).val();
                    var qty = $('.qty', context).val();

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

Answer 2

不要对多个元素使用相同的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>

Answer 3

在click函数中，您应该引用this来访问所点击的元素，以便您可以访问其父级并找到相应的p_id元素。

但是，在单个HTML文档中存在重复的ID无效 - 您应该使用类名。

$('.get').click(function() {
  const parent = $(this).parent();
  const id = parent.find('.p_id').val();
  const pname = parent.find('.name').val();
  const qty = parent.find('.qty').val();
  console.log('id ' + id + ' pname ' + pname + ' qty ' + qty);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='contents'>
  <div id='card'>
    <input class='p_id' type='hidden' value='1' name='productID' />
    <input class='name' type='text' value='Toshiba' name='product_name' />
    <input class='qty' type='text' value='1' name='qty' />
    <button id='1' class='get' name='get'>Get</button>
  </div>

  <div id='card'>
    <input class='p_id' type='hidden' value='2' name='productID' />
    <input class='name' type=' text ' value='Dell ' name='product_name' />
    <input class='qty' type='text ' value='3 ' name='qty' />
    <button id='2 ' class='get ' name='get '>Get</button>
    </div>
</div>

但是对于像这样的事情肯定不需要jQuery：

document.querySelectorAll('.get').forEach((get) => {
  get.onclick = () => {
    const parent = get.parentElement;
    const id = parent.querySelector('.p_id').value;
    const pname = parent.querySelector('.name').value;
    const qty = parent.querySelector('.qty').value;
    console.log('id ' + id + ' pname ' + pname + ' qty ' + qty);
  };
});

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

您还需要修复HTML：<input id='name type= id缺少结尾引用。

Answer 4

试试这个：

$(document).ready(function() {
    $('.get').click(function() {
        var id = $(this).closest('#card').find('#p_id').val();
        var pname = $(this).closest('#card').find('#name').val();
        var qty = $(this).closest('#card').find('#qty').val();

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

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

4 个答案: