动态HTML表单条目
问题描述：
是否可以制作一个HTML表单来响应用户想要发送的事件数量？动态HTML表单条目
也就是说，我现在拥有的是：
<form ...>
<select ...>
<option>1</option>
<option>2</option>
...
</select>
***
</form>
当用户选择的选项之一，***要有
<input type="text" ...>
出现的用户选择的次数。
也就是说，如果用户从选项中选择5，则用户应该看到5个输入选项。如果他改变了主意，选择2，那么页面应该相应地更新以仅显示2个输入选项。
===== [编辑] =====
我已经改变了代码，具有输入只是文本。我有的代码不起作用。它不更新输入字段的数量。
<script type="text/javascript">
<!--
function updateOptions(nvars)
{
var n = nvars;
while(n>0) {
var newdiv1 = "<div>Var name: <input type=\"text\" name=\"var-name\"><br></div>";
var newdiv2 = "<div>Var type: <input type=\"text\" name=\"var-type\"><br></div>";
newdiv1.appendTo("#bloo");
newdiv2.appendTo("#bloo");
n--;
}
}
//-->
</script>
<h3>Create a table in the test db!<h3>
<form name="f1" method="POST" action="createTable.php">
Name of Table: <input type="text" name="table-name"><br>
No of vars: <input type="text" name="numvars" onChange="updateOptions(this.value)"><br>
<div id="bloo"></div>
</form>
它工作时，我有一个文件撰写代替appendTo，但我基本上是想保持不变节省额外的输入字段的用户更改值后的页面numvars字段。
答
这是一个好主意，当你想让用户能够上传任意数量的文件或类似的东西。你可以用JavaScript做到这一点：
- 有一个空的DIV附近的SELECT
- 绑定到选择元素
- 在功能上“的onchange”事件的功能，阅读选择元素的值和：
-
- 空的DIV
-
- 创建一封quivalent <输入类型的DIV
你需要的代码里面= “文本” >的数量？如果你这样做，原型好吗？
好的，对不起，迟到了，最近很多工作要做。
以下内容应该足以让您获得创意。尽管如此，你将不得不学习JS，我甚至不知道你在用什么来处理你的问题。
<html>
<head>
</head>
<body>
<form>
<select id="num" value="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="container">
<p>
<input type="text" name="var-name" />
<input type="text" name="var-type" />
</p>
</div>
</form>
<script type="text/javascript">
var selectElm = document.getElementById('num');
var containerElm = document.getElementById('container');
var update = function() {
containerElm.innerHTML = '';
for (var i = 0, l = selectElm.value; i < l; ++i) {
containerElm.innerHTML += '<p><input type="text" name="var-name" /><br /><input type="text" name="var-type" /></p>';
} // add a number of couples of <input> equal to selectElm.value
}
//the following stuff says that when <select> changes the function called "update" must fire. Most of the code is for compatibility across browsers.
var listen, evt;
if (document.attachEvent) {
listen = 'attachEvent';
evt = 'onchange' ;
} else {
listen = 'addEventListener';
evt = 'change';
}
try {
selectElm[listen](evt, update);
} catch (e) {
selectElm[listen](evt, update, false);
}
// You do the same in Prototype with a single line:
// selectElm.observe('change', update);
// jQuery also requires only a single line of code.
</script>
</body>
</html>
答
是使用下拉输入字段的onChange事件并显示/隐藏您的输入字段。
如果不需要太多时间，一些代码会为我节省一段时间。 – user5243421 2009-11-17 08:24:56
我刚学过javascript，所以我不确定Prototype是什么。 – user5243421 2009-11-17 08:35:05
对不起，在忙碌的一天工作，我会看看我是否可以写下一些东西。 – 2009-11-17 15:12:02