How to limit dynamic entry in form?

0
votes
$(document).ready(function(){
  var i = 1;
  $('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="form-group"><label for="company">Company Name:</label><input type="text" class="form-control" name="company[]"></div><div class="form-group"><label for="project">Project Name:</label><input type="text" class="form-control" name="project[]"></div><div class="form-group"><label for="role">Role:</label><input type="text" class="form-control" name="role[]"></div<div class="form-group"><label for="duration">Duration:</label><input type="text" class="form-control" name="duration[]"></div><div class="form-group"><label for="learning">Key Learning:</label><textarea class="form-control" rows="5" name="learning[]" maxlength="150"></textarea></div></td><td><br><br><br><br><br><br><br><center><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">Remove</button></center></td></tr>');
  });

  $(document).on('click','.btn_remove', function(){
    var button_id = $(this).attr("id");
    $("#row"+button_id+"").remove();
  });

  $('#submit').click(function(){
    $.ajax({
      async: true,
      url: "internship_details.php",
      method: "POST",
      data: $('#internship_details').serialize(),
      success:function(rt)
      {
        alert(rt);
        $('#internship_details')[0].reset();
      }
    });
  });
});

This is the code for dynamic form entry. I want to set a limit that a person cannot add more than 5 i.e. I want to set the limit for value i. How should I do that?

2
javascriptphphtmljqueryjquery-events

2 Answers

0
votes

You can simply count the number of rows in your table in the "add" button click - if you already have five or more, bail out and don't add any new rows.

$(document).ready(function(){
  var i = 1;
  $('#add').click(function(){
    var table = $('#dynamic_field');
    if(table.children('tr').length >= 5) return; // if we already have 5 rows, don't add anymore
    i++;
    table.append('<tr id="row'+i+'"><td><div class="form-group"><label for="company">Company Name:</label><input type="text" class="form-control" name="company[]"></div><div class="form-group"><label for="project">Project Name:</label><input type="text" class="form-control" name="project[]"></div><div class="form-group"><label for="role">Role:</label><input type="text" class="form-control" name="role[]"></div<div class="form-group"><label for="duration">Duration:</label><input type="text" class="form-control" name="duration[]"></div><div class="form-group"><label for="learning">Key Learning:</label><textarea class="form-control" rows="5" name="learning[]" maxlength="150"></textarea></div></td><td><br><br><br><br><br><br><br><center><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">Remove</button></center></td></tr>');
  });

  $(document).on('click','.btn_remove', function(){
    var button_id = $(this).attr("id");
    $("#row"+button_id+"").remove();
  });

  $('#submit').click(function(){
    $.ajax({
      async: true,
      url: "internship_details.php",
      method: "POST",
      data: $('#internship_details').serialize(),
      success:function(rt)
      {
        alert(rt);
        $('#internship_details')[0].reset();
      }
    });
  });
});

Hope this helps!

0
votes

Simply use an if condition inside your click handlers to check for the amount of items added or removed.

Here is an example:

var i = 0;
$('#add').click(function() {
  if ( i < 5 ) {
    i++;
    $('#output').html(i)
  } else {
    alert("More than 5 elements are not allowed.");
  }
})

$('#remove').click(function() {
  if ( i > 0 ) {
    i--;
    $('#output').html(i)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">add</button>
<button id="remove">remove</button>
<div id="output">0</div>