javascript - Checking the input fields in html table is empty or not for adding dynamic rows

97

Hi I am having the html table which contain several columns, by pressing tab to add rows dynamically in the html table.i want to check that first and second input field is empty or not in html table. whether that input fields is empty rows not to get to added in dynamically. my problem is that validation is only working for first rows and not for dynamic rows.

  <form id='students' method='post' id="form1" name='form1' action='index.php'>
        <div id="nm">
         <div align="center">
          <b><input type="text" name="total_amt" id="total_amt" value="" maxlength="200" height="130px"; width="200px"; align="center"; /></b>
               </div>

          <table >
            <tr>
              <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
              <th>S. No</th>
              <th>Country Name</th>
              <th>Country Number</th>
              <th>Country Phone code</th>
              <th>Country code</th>
            </tr>
            <tr>
              <td><input type='checkbox' class='case'/></td>
              <td><span id='snum'>1.</span></td>
              <td><input type='text' id='countryname_1' name='countryname[]' autofocus /></td>
              <td ><input type='text' id='country_no_1' name='country_no[]'/></td>
              <td><input disabled type='text' id='phone_code_1' name='phone_code[]'/></td>
              <td><input disabled type='text' id='country_code_1' name='country_code[]'/> </td>
            </tr>
          </table>
          <button type="button" class='btn btn-danger delete'>- Delete</button>
          <button type="button" class='btn btn-success addmore'>+ Add More</button>
        </div>

      </form>


  <script type="text/javascript">
  $(document).ready(function(){
    $(".td_class").on('keyup', '#country_no_1', function(e) {  

    var icon1 = $('#countryname_1').val();

       var keyCode = e.keyCode || e.which;
         if (keyCode == 9 ) {
          if(icon1 == '' )
          {

           alert("Please Select an Item");
          document.form1.countryname_1.focus();
          }

          else{            
          $(".addmore").click();
          }
        } });

    });
   </script> 

Here am adding the script code below:

     <script>
          $(".delete").on('click', function() {
         $('.case:checkbox:checked').parents("tr").remove();
        $('.check_all').prop("checked", false); 
      check();
      });
     var i=$('table tr').length;

     $(".addmore").on('click',function(){
     count=$('table tr').length;

         var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
        data +="<td><input class='form-control' type='text' id='countryname_"+i+"' name='countryname[]'/></td> <td class='td_class'><input class='form-control country_no' type='text' id='country_no_"+i+"' name='country_no[]'/></td><td><input class='form-control' type='text' disabled id='phone_code_"+i+"' name='phone_code[]'/></td><td><input class='form-control' disabled type='text' id='country_code_"+i+"' name='country_code[]'/></td></tr>";
        $('table').append(data);
    /*test */


      $(".td_class").on('keyup', '#country_no_'+i, function(e) {
        var keyCode = e.keyCode || e.which; 
              if (keyCode == 9) { 
                e.preventDefault();                     
                $(".addmore").click();
              } 
        });
        /* test end */
    row = i ;
     $('#countryname_'+i).autocomplete({
     source: function( request, response ) {
      $.ajax({
        url : 'ajax.php',
        dataType: "json",
        method: 'post',
        data: {
           name_startsWith: request.term,
           type: 'country_table',
           row_num : row
        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[0],
                    value: code[0],
                    data : item
                }
            }));
        }
         });
     },
      autoFocus: true,          
      minLength: 0,
      select: function( event, ui ) {
      var names = ui.item.data.split("|");
      id_arr = $(this).attr('id');
      id = id_arr.split("_");                   
      $('#country_no_'+id[1]).val(names[1]);
      $('#phone_code_'+id[1]).val(names[2]);
      $('#country_code_'+id[1]).val(names[3]);
      }             
      });


    i++;
   });

     function select_all() {
     $('input[class=case]:checkbox').each(function(){ 
      if($('input[class=check_all]:checkbox:checked').length == 0){ 
        $(this).prop("checked", false); 
        } else {
         $(this).prop("checked", true); 
       } 
    });
    }

    function check(){
    obj=$('table tr').find('span');
     $.each( obj, function( key, value ) {
    id=value.id;
    $('#'+id).html(key+1);
   });
  }

    $('#countryname_1').autocomplete({
     source: function( request, response ) {
      $.ajax({
         url : 'ajax.php',
         dataType: "json",
         method: 'post',
         data: {
           name_startsWith: request.term,
           type: 'country_table',
           row_num : 1
        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[0],
                    value: code[0],
                    data : item
                }
            }));
          }
       });
   },
   autoFocus: true,         
   minLength: 0,
   select: function( event, ui ) {
    var names = ui.item.data.split("|");                        
    $('#country_no_1').val(names[1]);
    $('#phone_code_1').val(names[2]);
    $('#country_code_1').val(names[3]);
  }             
 });

   $('#country_code_1').autocomplete({
  source: function( request, response ) {
       $.ajax({
         url : 'ajax.php',
         dataType: "json",
         method: 'post',
         data: {
            name_startsWith: request.term,
            type: 'country_code',
            row_num : 1
         },
          success: function( data ) {
              response( $.map( data, function( item ) {
                 var code = item.split("|");
                 return {
                    label: code[3],
                    value: code[3],
                    data : item
                }
            }));
           }
      });
  },
   autoFocus: true,         
   minLength: 0,
   select: function( event, ui ) {
    var names = ui.item.data.split("|");                    
    $('#country_no_1').val(names[1]);
    $('#phone_code_1').val(names[2]);
    $('#countryname_1').val(names[0]);
},
open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}               
 });

       </script>

Help me @Thanks

People are also looking for solutions to the problem: php - Laravel Too many arguments, expected arguments "command" while scheduling

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.