添加文本框點擊添加按鈕

我正在工作的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>

來源

2016-10-04 kunal

哪裏是您的JavaScript代碼？ – madalinivascu

我不知道如何編寫jQuery的這部分代碼。多數民衆贊成我問問madalin – kunal

，並使陣列的name讓每個名字的值和代碼的樣子，

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

來源

2016-10-04 04:50:06

我們將如何獲得每個文本框的值 –

使'name'作爲字段的數組像'name []'。 –

謝謝rohan。我運行你的代碼，但現在當我點擊添加按鈕時，我添加第三個文本框它會提醒我「你不能添加更多」，但我的長度是4。 – kunal

這可能幫助，

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

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

來源

2016-10-04 04:53:11

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

來源

2016-10-04 04:57:16

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

來源

2016-10-04 05:06:23 Aswathy

添加文本框點擊添加按鈕

回答

相關問題