求一个动态表单的例子

laizhicong 2009-11-09 07:18:56

表单中含有一个<select type="radio">数据库二级联动，几个<input type="text">
现在想实现每点击一次添加按钮时，增加多一个<select type="radio">数据库二级联动，几个<input type="text">
我想使用JavaScript把表单里的名称用逗号间隔组装成数组，提交给servlet
请大家给个例子吧

...全文

302 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

laizhicong 2009-11-11

打赏
举报

只是有个数据库二级联动麻烦

阿非 2009-11-11

打赏
举报

二级联动怎么了？

阿非 2009-11-10

打赏
举报

你只是不确定生成的 name 吧~

在一个容器内新增，例如 div

在提交的时候执行一段函数，函数的功能是将新增的标签的name 赋给已知的标签

例如 hidden.value

div.getElementByTagName('input') text

div.getElementByTagName('select') select

夜雨~听风 2009-11-10

打赏
举报

联动用Ajax（DWR），用innerHtML输出表格

yyhlove 2009-11-10

打赏
举报

顶

chen_xiangguo 2009-11-09

打赏
举报

clone()，而不是createElement。。。

laizhicong 2009-11-09

打赏
举报

。有个数据库二级联动 createElement那不是需要写好多东西？

chen_xiangguo 2009-11-09

打赏
举报

传值使用ajax，这个我看不见你的服务端，写不了。

chen_xiangguo 2009-11-09

打赏
举报

修改一处bug,即name问题，这样你随便删除一行，我的id和name会自动更换
你的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>

wl_ldy 2009-11-09

打赏
举报

[Quote=引用 3 楼 xiaojing7 的回复:]
此问题可以分为2个小问题：
1:创建表单。
可以采用innerHTML或者createElement
2:获取表单值，传递服务器端
a)可以采用服务端隐藏控件获取表单值然后在服务器端传送
b)ajax
...
总之在客户端组装数据，然后在想办法传送到服务器端
[/Quote]
支持。。。

chen_xiangguo 2009-11-09

打赏
举报

你的name规则，自己改改，我不知道你要怎么设name



<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);

}

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>

xiaojing7 2009-11-09

打赏
举报

var inputList = document.getElementsByTagName("input");
for(var i=0;i<inputList. length;i++)
{
alert(inputList [i].name);
//inputList [i].name+','
//封装数据
}

laizhicong 2009-11-09

打赏
举报

laizhicong 2009-11-09

打赏
举报

晕。。。我都说了想得到用JavaScript把表单里的所有的name用逗号间隔组装成数组，提交给servlet

happy664618843 2009-11-09

打赏
举报

楼上都说了用createElement再appendChild 或者cloneNode

laizhicong 2009-11-09

打赏
举报

我就是想要这样的一个效果不过增加了个数据库二级联动

laizhicong 2009-11-09

打赏
举报

我想获得表单的name该怎么做啊？

laizhicong 2009-11-09

打赏
举报

	var i = 1;



	function AddMore() {

		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);

		};

		



	}