在ajax(php)中以数组形式访问id


accessing id as array in ajax(php)

朋友。我被一些javascript函数卡住了,无法将keyup函数读取到id为数组(qty[](的文本字段中。请帮我

    <table id="dynamic">
    <tr>
    <td>
    <label for="textfield">product :</label>
    </td><td> <select name="product" id="product[0]">
    <?php 
    $result=mysql_query("SELECT * FROM `product`");
    while($row=mysql_fetch_array($result)){
    ?>
    <option value=" <?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
    <?php }?>
    </select>
    <label for="qty">Qty :</label>
    <input type="text" name="qty" id="qty[0]"/>
    <label for="textfield">Price :</label>
    <input type="text" name="price" id="price[0]" readonly/>
    <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
    </td> <div id="loader"></div></tr>
    </table>

javascript

附加动态字段

  <script>
  $(document).ready(function(){
      var i=1;
      $('#add').click(function(){
          $('#dynamic').append('<tr id="row'+i+'"><td><label for="textfield">product :</label></td><td><select name="product" id="product['+i+']"><?php $result=mysql_query("SELECT * FROM `product`");while($row=mysql_fetch_array($result)){?><option value=" <?php echo $row['id']; ?>"><?php echo $row['name']; ?></option><?php }?></select><label for="qty">Qty :</label><input type="text" name="qty" id="qty['+i+']"/><label for="textfield">Price :</label><input type="text" name="price" id="price['+i+']" readonly/></td><td><button type="button" name="remove" class="btn btn-danger btn_remove" id="'+i+'">X</button></td></td><div id="loader"></div></tr>');
      i++;
      });
      $(document).on('click', '.btn_remove', function(){  
         var button_id = $(this).attr("id");   
         $('#row'+button_id+'').remove();  
    });  

  });
  </script>

在这里,我试图访问qty[0]变量,但它不起作用。当它的数组工作不正常时。

  <script type="text/javascript">
     $(document).ready(function()
     {
         var i=1;
         $("#qty[0]").keyup(function()
         {
               var qty=$("#qty[0]").val();
               var pdt=$("#product[0]").val();
              i++; 
               $.ajax({
                  type:"POST",
                  url:"price_ajax.php",
                  data : { qty : qty, pdt : pdt },
                  beforeSend: function () { 
          $('#loader').html('<img src="loader.gif" alt="" width="24" height="24">');
      },
                  success:function(data)
                  {
                        $("#price[0]").val(data);
                        $("#loader").html("");
                  }
               });
         });
   });

更改

$('#add').click(function() {
  $('#dynamic').append('... id="product['+i+']">...');
  i++;
});

$('#add').click(function() {
  $('#dynamic').append('... id="product_'+i+'">...');
  i++;
});

id="product[0]"将变为id="product_0"

将相同的方法应用于其他动态元素,并在jQuery选择器中进行相关修改。一切都会好起来的。

此外,我想在这里补充一点,请中断您的append呼叫。Javascript、HTML和PHP,一切都发生在一行中。这很令人困惑。准备一个javascript中的HTML变量。完成后,将其附加。

如下所述更新您的代码:

HTML更改:

id="qty[0]"字段的输入框中添加类别class='qty'

 $('#add').click(function(){
              $('#dynamic').append('<tr id="row'+i+'"><td><label for="textfield">product :</label></td><td><select name="product" id="product['+i+']"><?php $result=mysql_query("SELECT * FROM `product`");while($row=mysql_fetch_array($result)){?><option value=" <?php echo $row['id']; ?>"><?php echo $row['name']; ?></option><?php }?></select><label for="qty">Qty :</label><input type="text" name="qty" class="qty" id="qty['+i+']"/><label for="textfield">Price :</label><input type="text" name="price" id="price['+i+']" readonly/></td><td><button type="button" name="remove" class="btn btn-danger btn_remove" id="'+i+'">X</button></td></td><div id="loader"></div></tr>');
          i++;
      $( ".qty" ).each(function( index ) {
         $(this).keyup(function() {
        // your code here
       });
      });
          });

Jquery更改:

$( ".qty" ).each(function( index ) {
    $(this).keyup(function() {
        // your code here
    });
});