动态添加表单项问题

snowboy8886 2011-06-07 10:16:51

以前没做过js相关的东西，现在要在页面动态添加表单项，form里有个select，通过select的选项在form里设置不同的input。
百度查了两天也没找到，都是些关于js验证表单的。哪位有相关的例子，用js、jquery、都可以
先谢谢了

...全文

621 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

fengyun817 2011-06-07

打赏
举报

[Quote=引用 9 楼 snowboy8886 的回复:]

fengyun817 我试了下你的方法，但是下面两处标红的地方没看懂，var eles是判断先择吗？

var eles={'checkbox':'<input type="checkbox" name="x" id="x" />',
'text':'<input type="text" name="y" id="y" />'……
[/Quote]

eles 是一个对象。
根据不同的key 可以得到不同的value。
如：'checkbox':'<input type="checkbox" name="x" id="x" />' 这是一个键值对。

beforeEnd 是在结束之前添加。

eles[key]是根据你下拉框的值判断该添加什么标签。

toury 2011-06-07

打赏
举报

7楼：别客气；

10楼：
。。。。。。。。
document.getElementById('containner').appendChild(t)
t=document.createElement("BR");
document.getElementById('containner').appendChild(t)

yanweijie0317 2011-06-07

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
</head>

<body>
<select id='a'>
<option value=''>--请选择--</option>
<option value='txt1'>创建ID为txt1的文本框</option>
<option value='txt2'>创建ID为txt2的文本框</option>
</select>
<div id='containner'></div>
<script language="javascript">
$(document).ready(function(){
$("#a").change(function(){
$("#containner").append("<input type='text' id='text_"+$(this).val()+"' name='text_"+$(this).val()+"' value='ID为"+$(this).val()+"的文本框'/><br />");
});
});
</script>
</body>
</html>
亲手写的jquery代码，

yanweijie0317 2011-06-07

打赏
举报

[Quote=引用 3 楼 toury 的回复:]

HTML code

<select id=a onchange="test(this.value)">
<option value=''>--请选择--</option>
<option value='txt1'>创建ID为txt1的文本框</option>
<option value='txt1'>创建ID为txt1的文本框</option>
</select>
<div ……
[/Quote]
请教下添加多个文本框怎么换行？

snowboy8886 2011-06-07

打赏
举报

fengyun817 我试了下你的方法，但是下面两处标红的地方没看懂，var eles是判断先择吗？

var eles={'checkbox':'<input type="checkbox" name="x" id="x" />',
'text':'<input type="text" name="y" id="y" />',
'textarea':'<textarea name="z" id="z" cols="30" rows="10"></textarea>'
};
var xx = document.forms[0];
xx.insertAdjacentHTML('beforeEnd',eles[key]+"<br>");

fengyun817 2011-06-07

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ru">

<head>

	<title></title>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<script type="text/javascript">

		

		window.onload = function()

	  {

		  var s = document.getElementById("cc");

		  s.onchange = function(){

		  	if(this.value!="")

		  	{

		  		addElement(this.value);		  	

		  	}

		  }

		}

	

		function addElement(key)

		{

			var eles={'checkbox':'<input type="checkbox" name="x" id="x" />',

								'text':'<input type="text" name="y" id="y" />',

								'textarea':'<textarea name="z" id="z" cols="30" rows="10"></textarea>'

								};

			var xx = document.forms[0];

			xx.insertAdjacentHTML('beforeEnd',eles[key]+"<br>");

		}

		

	</script>

</head>

<body>

<form action="#" name="yourform">

	<select name="cc"  id="cc">

		<option value="">--请选择--</option>

		<option value="checkbox">checkbox</option>

		<option value="text">text</option>

		<option value="textarea">textarea</option>

	</select>

</form>		

</body>

</html>

snowboy8886 2011-06-07

打赏
举报

太谢谢toury了，刚回你一条信息，结果一看你给我回了这么多
xiexie

snowboy8886 2011-06-07

打赏
举报

LS太搞了

jsp代码：
<form:form name="orderForm" commandName="orderForm" method="POST" action="${foaPath}/confirm.htm" autocomplete="off"

onsubmit="return false;">
<form:select path="fromOrderTypeSelectIndex">

<form:options items="${orderForm.orderTypeSelectList}" itemValue="value" itemLabel="label"/>
</form:select>
</form:form>
通过itemValue="value" 在</form:select>下面添加不同的input，如<form:input path="orders.secAcct" size="20" maxlength="20"/>

toury 2011-06-07

打赏
举报

3楼代码有点乱搞了，要改改：
<option value='txt1'>创建ID为txt1的文本框</option>
<option value='txt2'>创建ID为txt2的文本框</option>

toury 2011-06-07

打赏
举报

[Quote=引用 1 楼 t5500 的回复:]

把form的代码发上来，需求再描述详细点。
百毒只能查到性药广告，建议用google.
[/Quote]
严重同意。
科技搜索找GOOGLE
家长里短找百毒

toury 2011-06-07

打赏
举报



<select id=a onchange="test(this.value)">

  <option value=''>--请选择--</option>  

  <option value='txt1'>创建ID为txt1的文本框</option>

  <option value='txt1'>创建ID为txt1的文本框</option>

</select>

<div id=containner></div>

<script>

function test(id){

  if(id=="")return

  var t=document.createElement("INPUT")

  t.type="text";

  t.value="这是动态创建的文本框";

  t.id=id;

  document.getElementById('containner').appendChild(t);

}

</script>