使用 Javascript 创建表单
Using Javascript to Create Forms
我正在考虑创建一个抽奖生成器,并且只使用HTML和Javascript来做到这一点。我目前让用户为"玩家"的数量选择一个"选择"选项,然后是一个 onclick() 事件来创建这么多"名称"框。
其代码为:
<label for="playerNumbers">How many people are involved in the sweepstake?</label>
<select id="playerNumbers" name="playerNumbers">
<option value="2" onclick="makeform(2)"> 2 </option>
<option value="3" onclick="makeform(3)"> 3 </option>
<option value="4" onclick="makeform(4)"> 4 </option>
<option value="5" onclick="makeform(5)"> 5 </option>
<option value="6" onclick="makeform(6)"> 6 </option>
<option value="7" onclick="makeform(7)"> 7 </option>
<option value="8" onclick="makeform(8)"> 8 </option>
<option value="9" onclick="makeform(9)"> 9 </option>
<option value="10" onclick="makeform(10)"> 10 </option>
</select>
'makeform()' 函数看起来像:
function makeform(numberOfPlayers) {
var x = '<form id="playerNames">';
for (i = 0; i < numberOfPlayers; i++) {
x += '<label for="player'+(i+1)+'">Player '+(i+1)+'</label>';
x += '<input type="text" id="player'+(i+1)+'" />';
x += '<br />';
}
document.getElementById("newForm").innerHTML = x;
}
这是一种享受,但是当用户填写新生成的表单时,问题就来了。我在"整体表单"(包括新表单)的底部包含一个提交底部,但它似乎无法识别新生成的表单。
我想我问了两个问题:1.) 我该如何完成这项工作?您可以使用Javascript无限生成表单还是有限制?2.)这是最好的方法吗?我确定不是,但真的不知道我应该关注什么技术。
谢谢!
(根据要求 - 所有代码:)
<form id="nameForm">
<div id="teamForm">
<label for="teamNumber">How many teams are involved?</label>
<select id="teamNumber" name="teamNumber">
<option value="2" onclick="makeform1(2)"> 2 </option>
<option value="3" onclick="makeform1(3)"> 3 </option>
<option value="4" onclick="makeform1(4)"> 4 </option>
<option value="5" onclick="makeform1(5)"> 5 </option>
<option value="6" onclick="makeform1(6)"> 6 </option>
<option value="7" onclick="makeform1(7)"> 7 </option>
<option value="8" onclick="makeform1(8)"> 8 </option>
<option value="9" onclick="makeform1(9)"> 9 </option>
<option value="10" onclick="makeform1(10)"> 10 </option>
<option value="11" onclick="makeform1(11)"> 11 </option>
<option value="12" onclick="makeform1(12)"> 12 </option>
<option value="13" onclick="makeform1(13)"> 13 </option>
<option value="14" onclick="makeform1(14)"> 14 </option>
<option value="15" onclick="makeform1(15)"> 15 </option>
<option value="16" onclick="makeform1(16)"> 16 </option>
<option value="17" onclick="makeform1(17)"> 17 </option>
<option value="18" onclick="makeform1(18)"> 18 </option>
<option value="19" onclick="makeform1(19)"> 19 </option>
<option value="20" onclick="makeform1(20)"> 20 </option>
<option value="21" onclick="makeform1(21)"> 21 </option>
<option value="22" onclick="makeform1(22)"> 22 </option>
<option value="23" onclick="makeform1(23)"> 23 </option>
<option value="24" onclick="makeform1(24)"> 24 </option>
<option value="25" onclick="makeform1(25)"> 25 </option>
<option value="26" onclick="makeform1(26)"> 26 </option>
<option value="27" onclick="makeform1(27)"> 27 </option>
<option value="28" onclick="makeform1(28)"> 28 </option>
</select>
<div id="newForm2"></div>
</div>
<label for="playerNumbers">How many people are involved in the sweepstake?</label>
<select id="playerNumbers" name="playerNumbers">
<option value="2" onclick="makeform(2)"> 2 </option>
<option value="3" onclick="makeform(3)"> 3 </option>
<option value="4" onclick="makeform(4)"> 4 </option>
<option value="5" onclick="makeform(5)"> 5 </option>
<option value="6" onclick="makeform(6)"> 6 </option>
<option value="7" onclick="makeform(7)"> 7 </option>
<option value="8" onclick="makeform(8)"> 8 </option>
<option value="9" onclick="makeform(9)"> 9 </option>
<option value="10" onclick="makeform(10)"> 10 </option>
</select>
<div id="newForm"></div>
<input type="submit" value="Submit Form" onclick="doSweepstake(this.form)" />
</form>
和:
function makeform1(numberofTeams) {
var y = '<form id="teamNames">';
for (j = 0; j < numberofTeams; j++) {
y += '<label for="team'+(j+1)+'">Team '+(j+1)+'</label>';
y += '<input type="text id="team'+(j+1)+'" />';
y += '<br />';
}
document.getElementById("newForm2").innerHTML = y;
}
除了上面已经给出的功能。
这在原则上不起作用,因为您无法嵌套表单。您需要将字段添加到父窗体。
你可以用普通的JS来做到这一点,但我建议你不要重新发明轮子,而是学习使用JS库 - 比如jQuery。这将使您的生活更轻松 - 它极大地简化了 DOM 操作(并且做得更多)。例如,您可以执行以下操作:
$("#playerNumbers option").click(function() {
var p = $("#playerNames");
for (var i = 0; i < $(this).attr("value"); i++)
p.append('<label><input /></label><br />'); // etc
})
乍一看可能看起来令人困惑,但再次浏览这段代码会向您展示许多熟悉的东西 - 以及使用这样的东西而不是onclick
和innerHTML
的笨拙野兽的优雅。
我发现了一些事情:
1)您应该在选择上使用onchange事件,而不是在选项上使用onclick - 这使得它跨浏览器友好且易于访问 - 如果用户按Tab键选择然后使用箭头键更改选择会发生什么?点击不会触发...
<select id="playerNumbers" name="playerNumbers" onchange="makeform(this.options[this.selectedIndex].value)">
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10"> 10 </option>
</select>
2)您通过JavaScript创建的表单没有结束标签或提交按钮。
3) 您的输入元素没有名称,因此不会发送 POST/GET 数据。
试试这个:
function makeform(numberOfPlayers) {
var x = '<form id="playerNames">';
for (i = 0; i < numberOfPlayers; i++) {
x += '<label for="player'+(i+1)+'">Player '+(i+1)+'</label>';
x += '<input type="text" id="player'+(i+1)+'" name="player[]" />';
x += '<br />';
}
x += '<input type="submit" name="submit" value="Submit" />';
x += '</form>';
document.getElementById("newForm").innerHTML = x;
}
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 使用Web Html表单创建Javascript数组
- 为网站表单创建一个专业的日历
- 如何创建动态ajax提交表单
- 如何在 Dreamweaver 上为我的表单创建摘要页面
- jQuery Mobile:动态表单创建显示本机控件与jQuery Mobile插件控件
- 如何为注册表单创建圆形轮廓仪表
- 我可以使用Orbeon表单创建具有固定位置的HTML表单字段吗
- javascript的polyfill用简单的表单创建对象
- OOP中的动态表单创建和提交
- 为动态表单创建处理程序
- 提交时如何使用html表单创建页面或html代码
- 在aspx中为应用程序表单创建选项卡
- 从Web表单创建代码片段(易于剪切和粘贴)
- Javascript和动态表单创建
- Javascript:重置表单创建的变量值
- 简单 HTML 表单创建循环中的永恒循环
- 类似 Google 表单的表单创建器与 Rails 4
- 如何使用javascript从Html表单创建xml文件
- Javascript如何基于另一个表单创建一个表单