表单中含有 一个<select type="radio">数据库二级联动，几个<input type="text">
现在想实现每点击一次添加按钮时，增加多一个<select type="radio">数据库二级联动，几个<input type="text">
我想使用JavaScript把表单里的名称用逗号间隔组装成数组，提交给servlet
请大家给个例子吧
现在想实现每点击一次添加按钮时，增加多一个<select type="radio">数据库二级联动，几个<input type="text">
我想使用JavaScript把表单里的名称用逗号间隔组装成数组，提交给servlet
请大家给个例子吧
1:创建表单。
可以采用innerHTML或者createElement
2:获取表单值，传递服务器端
a)可以采用服务端隐藏控件获取表单值然后在服务器端传送
b)ajax
...
总之在客户端组装数据，然后在想办法传送到服务器端
i++;
var more = document.getElementById("that");
var br = document.createElement("br");
var input = document.createElement("input");
var text = document.createElement("input");
var button = document.createElement("input");
var num = document.createElement("input"); num.type = "hidden";
num.name = "num";
num.value = i; input.type = "text";
input.name = "text" + i; text.type = "text";
text.name = "key" + i; button.type = "button";
button.value = "删除"; more.appendChild(br);
more.appendChild(input);
more.appendChild(text);
more.appendChild(button);
more.appendChild(num); button.onclick = function() {
i--;
more.removeChild(br);
more.removeChild(input);
more.removeChild(text);
more.removeChild(button);
more.removeChild(num);
};
}
for(var i=0;i<inputList. length;i++)
{
alert(inputList [i].name);
//inputList [i].name+','
//封装数据
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<form action="" method="post">
<table id="table1" border="1">
<tr id="tr0"><td><input name="text0" type="text"></td><td><input name="text00" type="text"></td><td><input type="button" value="删除" onClick="delTr(event)"></td></tr>
</table>
<input type="button" value="添加行" id="addTr">
<input type="button" value="所有nane" id="allName">
</form>
</body>
</html>
<script language="javascript">
$(function()
{
$('#addTr').click(addTr);
$('#delTr').click(delTr);
$('#allName').click(getAllName);
});
function addTr()
{
$('#tr0').clone(true).appendTo($('#table1'));
var rowsCount=$('#table1')[0].rows.length;
$('#table1')[0].rows[ rowsCount-1].id="tr"+(rowsCount-1);
$('#tr'+(rowsCount-1)).find("input[type=text]")[0].name="text"+(rowsCount-1);
$('#tr'+(rowsCount-1)).find("input[type=text]")[1].name="text"+(rowsCount-1)+"0";
}
function delTr(e)
{
var evt=event||e;
var obj=evt.srcElement || evt.target;
$(obj).parent().parent().remove();
//alert(obj.tagName);
}
function getAllName()
{
var arrText=$('input[type=text]');
var arrLength=arrText.length;
var arr=new Array(arrLength);
for(var i=0;i<arrLength;i++)
{
arr[i]=arrText[i].name;
}
alert(arr.toString());
}
</script>
你的name 规则按我的来就可以
第几行，第一个文本框的name为（行-1),第二个文本框的name为(行-1+"0")。
代码<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<form action="" method="post">
<table id="table1" border="1">
<tr id="tr0"><td><input name="text0" type="text"></td><td><input name="text00" type="text"></td><td><input type="button" value="删除" onClick="delTr(event)"></td></tr>
</table>
<input type="button" value="添加行" id="addTr">
<input type="button" value="所有nane" id="allName">
</form>
</body>
</html>
<script language="javascript">
$(function()
{
$('#addTr').click(addTr);
$('#delTr').click(delTr);
$('#allName').click(getAllName);
});
function addTr()
{
$('#tr0').clone(true).appendTo($('#table1'));
var rowsCount=$('#table1')[0].rows.length;
$('#table1')[0].rows[ rowsCount-1].id="tr"+(rowsCount-1);
$('#tr'+(rowsCount-1)).find("input[type=text]")[0].name="text"+(rowsCount-1);
$('#tr'+(rowsCount-1)).find("input[type=text]")[1].name="text"+(rowsCount-1)+"0";
}
function delTr(e)
{
var evt=event||e;
var obj=evt.srcElement || evt.target;
$(obj).parent().parent().remove();
//alert(obj.tagName);
changeTrId();
}
function getAllName()
{
var arrText=$('input[type=text]');
var arrLength=arrText.length;
var arr=new Array(arrLength);
for(var i=0;i<arrLength;i++)
{
arr[i]=arrText[i].name;
}
alert(arr.toString());
}
function changeTrId()
{
var rowArr=$('#table1')[0].rows;
var rowCount=rowArr.length;
for(var i=0;i<rowCount;i++)
{
rowArr[i].id="tr"+i;
$("#tr"+i).find("input[type=text]")[0].name="text"+i;
$("#tr"+i).find("input[type=text]")[1].name="text"+i+"0";
}
}
</script>