0

I am trying to check each value in dynamically created input text field, exists in mysql. I can handle for single input. However, when more then one, it is not working. Here you can check codes and page image. Any idea ? Thanks in advance.

enter image description here

HTML

                   <div class="form-group">  
                  <label for="exampleInputEmail1">Product Serial Number</label>
                      <div class="table-responsive">  
                           <table class="table table-bordered" id="dynamic_field">  
                            
                          
                                <tr>  
                                  
                                     <td><input type="text" id="check_serino" name="check_serino[]" placeholder="Serial Number" class="form-control" required /></td>   
                                                                            
                                     <td><button type="button" name="add" id="add" class="btn btn-success add_item_btn">Add</button></td>  
                                     <td> <span id="check-serialnumber"></span></td>  
                                    
                                     
                                </tr>  
                           </table>  
                            
                      </div>  
                
            </div>

jquery

 $(document).ready(function(){  


  $("#check_serino").keyup(function(){
 
 var serino = $(this).val().trim();
  
 if(serino != ''){

    $.ajax({
       url: 'getdata.php',
       type: 'post',
       data: {serino:serino},
       success: function(response){

          // Show response
          $("#check-serialnumber").html(response);
          console.log(response); 

       }
    });
 }else{
    $("#check-serialnumber").html("");

 }

  });

  var i=1;  
  $('#add').click(function(){  
       i++;  
       $('#dynamic_field').append('<tr id="row'+i+'"><td> <input id="check_serino" type="text" name="check_serino[]" placeholder="Serial Number" class="form-control" required/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td><td> <span id="check-serialnumber"></span></td></tr>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  

  });
aig_88
  • 13
  • 7
  • IDs must be unique, you can't have multiple inputs with `id="check_serino"` – Barmar Apr 13 '22 at 20:17
  • Each of your dynamically inserted `` fields has `id="check_serino"` which is invalid. IDs must be unique. Also, instead of checking for `keyup` on `#check_serino`, use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) to check the table and determine which input field cause the event. – kmoser Apr 13 '22 at 20:17
  • @kmoser Could you please show an example for html and jquery ? – aig_88 Apr 13 '22 at 20:20
  • @aig_88 The link I posted has an example of using event delegation. Or you could not use event delegation, and instead add a `keyup` event listener for every new `` field. In either case, though, you'll want to fix the problem of duplicate IDs (including ``). – kmoser Apr 13 '22 at 20:21

0 Answers0