動的フォームフィールドの制限

Question

私はフォームフィールドをクリック時に動的に追加するフォームを使用しています。残念ながら、フォームフィールドの追加を制限することはできません。どんな助けもありがとう。私は、任意のループが表示されない

$(document).ready(function(){ 
    $(".addmore").on('click', function() { 
     var count = $('table tr').length; 
     var data = "<tr class='case'><td><span id='snum" + count + "'> Field"+ count + ".</span></td>"; 
     data += "<td><input class='form-control' type='text' id='c1' name='field"+count+"'/></td> </tr>"; 


     $('#form_table').append(data); 
     i++; 

    }); 
    $(".delete").on('click', function() { 
     $('tr.case:last').remove(); 
    }); 

    //insert into database 

    //insert into database 
    $('.insert').on('click', function(){ 
     $.ajax({ 
      url: 'upload_file.php', 
      method: 'post', 
      data: $('form#students').serialize(), 
      success: function(data){ 
       $('#record_list').html(data); 
      } 
     }); 
    }); 


}); 

Answer 1

$(document).ready(function(){  
$(".addmore").on('click', function() { 
    var count = $('table tr').length; 
    if(count >= 5) return; 
    var data = "<tr class='case'><td><span id='snum" + count + "'> Field"+ count + ".</span></td>"; 
    data += "<td><input class='form-control' type='text' id='c1' name='field"+count+"'/></td> </tr>"; 
    $('#form_table').append(data); 

}); 

Answer 2

$(document).ready(function() { 
    var init = $('table tr').length; 
    $(".addmore").on('click', function() { 
     var count = init + parseInt($('table tr').length); 
     if(count >= 5) { alert('No more rows allowed'); return; } 
      var data = "<tr class='case'><td><span id='snum" + count + "'> Field" + count + ".</span></td>"; 
      data += "<td><input class='form-control' type='text' id='c1' name='field" + count + "'/></td> </tr>"; 


      $('#form_table').append(data); 
      i++; 

    }); 
    $(".delete").on('click', function() { 
     $('tr.case:last').remove(); 
    }); 

    //insert into database 

    //insert into database 
    $('.insert').on('click', function() { 
     $.ajax({ 
      url: 'upload_file.php', 
      method: 'post', 
      data: $('form#students').serialize(), 
      success: function(data) { 
       $('#record_list').html(data); 
      } 
     }); 
    }); 
});