Question

我正在研究laravel框架，我需要当用户点击“添加更多”按钮时，文本框添加到按钮上方。当用户到达第18个文本框时我需要18个文本框它会发出警报。我不知道如何添加。我是jquery和javascript的新手。任何人都可以帮助我

以下是截图： - {{3}}

这是我的Html代码： -

condition

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这可能会有所帮助，

＆＃13;

$('.sign-bttn').click(function(e) {
  $('.text-boxes').prepend('<input type="text" name="name" class="form-control">');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-boxes">
    <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>

＆＃13;

Answer 3

你的Html：

<div id="divContain">
  <div id='divText'>
    <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>

你的JQuery：

 var maxField = 18;
 var fieldHTML = ' <input type="text" name="name" class="form-control">'; //New input field html 
 var x = 1; //Initial field counter is 1
 $('.btn-info').click(function() { //Once add button is clicked
   if (x < maxField) { //Check maximum number of input fields
     x++; //Increment field counter
     $('#divText').append(fieldHTML); // Add field html
   }
   else
   {

   alert('No more text box :)');
   }
 });

Working Fiddle

Answer 4

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){


$('.sign-bttn').click(function(e) {

if($('input[name="name"]').length < 18)
{
$('.text-boxes').prepend('<input type="text" name="name" class="form-control" value='+ ($('input[name="name"]').length + 1) +'>');
}
else
{
alert("reached 18 TextBoxes.............")
}
});


    });
    </script>
    </head>
    <body>
    <div class="text-boxes">
    <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>


        </body>


    </body>
    </html>

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

4 个答案: