如何限制表单中的动态输入？

Question

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

这是动态表单输入的代码。我想设置一个人不能添加超过 5 个的限制，即我想设置值 i 的限制。我应该怎么做？

Answer 1

您只需在 "add" 按钮单击时计算 table 中的行数 - 如果您已经有五行或更多行，请放弃并且不要添加任何新行。

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

希望对您有所帮助！

Answer 2

只需在 click 处理程序中使用 if 条件即可检查添加或删除的项目数量。

这是一个例子：

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>

如何限制表单中的动态输入？

How to limit dynamic entry in form?

html

javascript

php

jquery

jquery-events