Add text box on click on Add Button
Question
I am working on laravel framework here i need when user click on Add more button the textbox add above on button. I need 18 textbox when user reached to 18th Textbox it will give alert.I don't know how to add. I am new in jquery and javascript. Can anyone help me
Here is the screenshot:-
Here is my Html Code:-
<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>
4 answers
solution1
2 2016-10-04 04:50:06
Make array of name to get values of each name and the code looks like,
$(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>
solution2
1 2016-10-04 04:53:11
This might help,
$('.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>
solution3
0 2016-10-04 04:57:16
Your 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>
Your 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 :)');
}
});
solution4
0 2016-10-04 05:06:23
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript on button click add value to text box
How to add a text box on a button click?
Add commenting box on click of button
How can I add the value from button to the text box by click?
add a button next to text box
On click on add button add another radio button with input box value
React Native add text to TextInput on button click
How to add text to modal on button click
Initial there is a text box with add icon at right of text box, on click of add icon...a new text box to be added below
How to add DatePicker when I click on text box?
Related Tags