CODEWITHSUNDEEP
javascriptphpjqueryarraysajax
Siby Xavier
Siby Xavier

Reputation: 136

accessing id as array in ajax(php)

friends.I am stuck with some javascript function to read keyup function to a text field with id as array(qty[]).Please help me

    <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

appending dynamic fields

  <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>

here i tried to access the qty[0] variable.but its not working.When its not array working fine.

  <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("");
                  }
               });
         });

   });

Upvotes: 2

Views: 165

Answers (2)

Sharfaraz Bheda
Sharfaraz Bheda

Reputation: 457

Update your code as mentioned below:

HTML Changes:

Add class class='qty' in input box in id="qty[0]" field

 $('#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 Changes:

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

Upvotes: 1

Bhavik Shah
Bhavik Shah

Reputation: 2291

Change

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

To

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

id="product[0]" will become id="product_0"

Apply same method to other dynamic elements and make relevant modifications in your jQuery selector. Everything will work fine.

Also, I would like to add here that, please break up your append call. Javascript, HTML and PHP, everything is happening in one single line. Which is very confusing. Prepare an HTML in javascript variable. Once done, append it.

Upvotes: 1

Related Questions