Javascript 在标签中生成jQuery表单字段和sno
我需要一个表单来动态生成表单元素。到目前为止，我已经修改了一个脚本来添加另一个字段Javascript 在标签中生成jQuery表单字段和sno,javascript,jquery,jqueryform,Javascript,Jquery,Jqueryform,我需要一个表单来动态生成表单元素。到目前为止，我已经修改了一个脚本来添加另一个字段txtEmail1，它工作正常，一旦用户点击add按钮就会生成字段 现在我需要在标签“全名”前面加上序号1、2、3、4等等。我试过了，但我没能把它弄对。我需要专家的帮助 <script type="text/javascript"> $(document).ready(function() { $('#btnAdd').click(function() {
txtEmail1<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
newElem.children(':first').attr('id', 'txtEmail' + newNum).attr('txtEmail', 'txtEmail' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').attr('disabled','');
// business rule: you can only add 5 names
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
</head>
<body>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<label id="lblSno1"></label> Full Name
<input name="name1" type="text" class="TextBoxNext" id="name1" /></td>
<input name="txtEmail1" type="text" class="TextBoxNext" id="txtEmail1" /></td>
</div>
</form>
</body>
$（文档）.ready（函数（）{
$（'#btnAdd'）。单击（函数（）{
var num=$（'.clonedInput'）.length；//当前有多少个“可复制”输入字段
var newNum=newnumber（num+1）；//正在添加的新输入字段的数字ID
//通过clone（）创建新元素，并使用newNum值操纵其ID
var newElem=$（'#input'+num）.clone（）.attr（'id'，'input'+newNum）；
//操纵新元素内输入的名称/id值
newElem.children（':first'）.attr（'id'，'name'+newNum）.attr（'name'，'name'+newNum）；
newElem.children（':first'）.attr（'id'，'txtEmail'+newNum）.attr（'txtEmail'，'txtEmail'+newNum）；
//在最后一个“可复制”输入字段后插入新元素
$（'#input'+num）.after（newElem）；
//启用“删除”按钮
$（'btnDel'）.attr（'disabled'，''）；
//业务规则：只能添加5个名称
如果（newNum==5）
$（'btnAdd'）.attr（'disabled'，'disabled'）；
});
$（'#btnDel'）。单击（函数（）{
var num=$（'.clonedInput'）.length；//当前有多少个“可复制”输入字段
$（'#输入'+num）.remove（）；//删除最后一个元素
//启用“添加”按钮
$（'btnAdd'）.attr（'disabled'，''）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）
$（'btnDel'）.attr（'disabled'，'disabled'）；
});
$（'btnDel'）.attr（'disabled'，'disabled'）；
});
全名
我还需要将计数分配给某个隐藏字段，以便可以对用户创建的字段数运行插入查询 试试下面的方法。我对代码的结构做了一些修改，即：
*创建所有可见克隆都将从中克隆的隐藏模板
*使添加/删除按钮按需工作
*添加了隐藏字段，其中包含项目数
*将大量代码放入函数以供重用
<script type="text/javascript">
// document - on load
$(document).ready(function() {
// add the first item
AddInput();
UpdateButtons();
// add button - click
$('#btnAdd').click(function() {
AddInput();
UpdateButtons();
});
// delete button - click
$('#btnDel').click(function() {
$('.clonedInput:last').remove();
UpdateButtons();
});
});
function AddInput()
{
// how many cloned input fields we currently have
var numItems = $('.clonedInput').length;
var newNum = new Number(numItems + 1);
// create the new element via clone() based on hidden template
var newElem = $('.templateInput').clone();
// update attributes on parent tag
newElem.attr('id', 'input' + newNum);
newElem.attr('class', 'clonedInput');
newElem.show();
// update child elements
newElem.children('#lblSno').html(newNum + ' ' + newElem.children('#lblSno').html());
newElem.children('#lblSno').attr('id', 'lblSno' + newNum);
newElem.children('#name').attr('id', 'name' + newNum);
newElem.children('#txtEmail').attr('id', 'txtEmail' + newNum);
// insert the new element
$('#allInputs').append(newElem);
}
function UpdateButtons()
{
// get number of items
var numItems = $('.clonedInput').length;
// only enable delete button when there is more than 1 item
if (numItems > 1)
$('#btnDel').removeAttr('disabled');
else
$('#btnDel').attr('disabled', 'disabled');
// only enable add button when there are less than 5 items
if (numItems < 5)
$('#btnAdd').removeAttr('disabled');
else
$('#btnAdd').attr('disabled', 'disabled');
// update the hidden field
$('#hdnNumItems').val(numItems);
}
</script>
//文件-已加载
$（文档）.ready（函数（）{
//添加第一项
AddInput（）；
UpdateButtons（）；
//添加按钮-单击
$（'#btnAdd'）。单击（函数（）{
AddInput（）；
UpdateButtons（）；
});
//删除按钮-单击
$（'#btnDel'）。单击（函数（）{
$（'.clonedInput:last'）.remove（）；
UpdateButtons（）；
});
});
函数AddInput（）
{
//我们目前有多少个克隆输入字段
var numItems=$（'.clonedInput'）.length；
var newNum=新的数字（numItems+1）；
//基于隐藏模板通过clone（）创建新元素
var newElem=$（'.templateInput'）.clone（）；
//更新父标记上的属性
newElem.attr（'id'，'input'+newNum）；
newElem.attr（'class'，'clonedInput'）；
newElem.show（）；
//更新子元素
newElem.children（'#lblSno'）.html（newNum+''+newElem.children（'#lblSno'）.html（））；
newElem.children（'#lblSno'）.attr（'id'，'lblSno'+newNum）；
newElem.children（'#name'）.attr（'id'，'name'+newNum）；
newElem.children（'#txtEmail'）.attr（'id'，'txtEmail'+newNum）；
//插入新元素
$（'#allInputs'）。追加（newElem）；
}
函数UpdateButtons（）
{
//获取项目数
var numItems=$（'.clonedInput'）.length；
//仅当存在多个项目时才启用删除按钮
如果（numItems>1）
$（'btnDel'）.removeAttr（'disabled'）；
其他的
$（'btnDel'）.attr（'disabled'，'disabled'）；
//仅当项目少于5项时启用“添加”按钮
if（numItems<5）
$（'btnAdd'）.removeAttr（'disabled'）；
其他的
$（'btnAdd'）.attr（'disabled'，'disabled'）；
//更新隐藏字段
$（'hdnNumItems'）.val（numItems）；
}
全名
newElem.text(newNum + " ) Full Name " );
就这样。你的序列号已经准备好了 将输入命名为
fullname[]newElem.text(newNum + " ) Full Name " );