javascript - 单击“添加”按钮添加文本框

Question

我正在开发 laravel 框架，当用户单击“添加更多”按钮时，我需要将文本框添加到按钮上方。我需要 18 个文本框，当用户到达第 18 个文本框时，它会发出警报。我不知道如何添加。我是 jquery 和 javascript 新手。谁能帮帮我

这是屏幕截图:-

这是我的 HTML 代码:-

<div>
    <input type="text" name="name" class="form-control">
        <div class="sign-btn signup-page">
        <button class="btn btn-info sign-bttn">Add More</button>
        </div>
</div>

Answer 1

创建名称数组以获取每个名称的值，代码如下所示，

$(function() {
  var len = 4; // for testing purpose I am using 4 you can change it to 18
  $('.sign-bttn').on('click', function() {
    if($('#name-container-list .name-list').length==len){
       alert("You can't add more");
       return false;
    }
    $clone = $('#name-container-list .name-list:first').clone();
    $clone.find('input').val(''); // empty the new clone field
    $(this).parent('div').before($clone);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="name-container-list">
  <div class="name-list">
    <input type="text" name="name[]" class="form-control" />
  </div>
  <div class="sign-btn signup-page">
    <button class="btn btn-info sign-bttn">Add More</button>
  </div>
</div>