使用JavaScript添加新文本框
[英]Adding new text box using javascript
问题描述
I have a webpage. 
我有一个网页。 There is a button called add. 有一个名为添加的按钮。 When this add button is clicked then 1 text box must be added. 单击此添加按钮后，必须添加1个文本框。 This should happen at client side only. 这应该仅在客户端发生。 I want to allow the user to add at most 10 text boxes. 我想允许用户最多添加10个文本框。
How can I achieve it using javascript? 如何使用javascript实现它？
example: 例：
- only 1 text box is displayed 仅显示一个文本框
- user click add > 用户单击添加>
- 2 text boxes displayed 显示2个文本框
- user clicks add > 用户点击添加>
I also wants to provide a button called "remove" by which the user can remove the extra text box 我还想提供一个名为“删除”的按钮，用户可以通过该按钮删除多余的文本框
Can anyone provide me a javascript code for this?? 谁能为此提供一个JavaScript代码？
3 个解决方案
解决方案1
1 2009-08-09 10:39:59
Untested, but this should work (assuming an element with the right id exists); 未经测试，但这应该可以工作（假设存在具有正确ID的元素）；
var add_input = function () {
var count = 0;
return function add_input() {
count++;
if (count >= 10) {
return false;
}
var input = document.createElement('input');
input.name = 'generated_input';
document.getElementbyId('inputs_contained').appendChild(input);
}
}();
add_input();
add_input();
add_input();
解决方案2
1 2009-08-09 10:41:48
A solution using the jQuery framework: 使用jQuery框架的解决方案：
<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>
The jQuery script code: jQuery脚本代码：
$(function(){
$(".addbutton").click(){
if(".addedfields").length < 10){
$(".addedfields").append(
'<li><input type="text" name="field[]" class="textbox" />' +
'<input type="button" class="removebutton" value="remove"/></li>'
);
}
}
// live event will automatically be attached to every new remove button
$(".removebutton").live("click",function(){
$(this).parent().remove();
});
});
Note: I did not test the code. 注意：我没有测试代码。
Edit: changed faulty quotation marks 编辑：更改错误的引号
解决方案3
1 2009-08-09 10:43:07
I hope you are using jQuery. 我希望您使用的是jQuery。
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.