[英]Add text box on click on Add Button
I am working on laravel framework here i need when user click on Add more button the textbox add above on button. 我正在这里的laravel框架上工作,当用户单击添加更多按钮时,我需要在文本框上方添加按钮。 I need 18 textbox when user reached to 18th Textbox it will give alert.I don't know how to add.
当用户到达第18个文本框时,我需要18个文本框,它将发出警报。我不知道如何添加。 I am new in jquery and javascript.
我是jquery和javascript的新手。 Can anyone help me
谁能帮我
Here is the screenshot:- 这是屏幕截图:-
Here is my Html Code:- 这是我的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>
Make array of name
to get values of each name and the code looks like, 创建
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>
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>
Your Html: 您的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: 您的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 :)');
}
});
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.