Добавить текстовое поле при нажатии кнопки Добавить

Я работаю над рамкой 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 этой части. thats y i m ask 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. я запускаю ваш код, но теперь, когда я нажимаю кнопку addmore, когда добавляю третий текстовый блок, он будет предупреждать меня «вы не можете добавить больше», но моя длина равна 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

Добавить текстовое поле при нажатии кнопки Добавить

ответ

Смежные вопросы