如何在javascript中的现有表单中添加新表单元素?
当锚定标记被单击时,如何添加另一个空表单元素 这是我使用的代码:如何在javascript中的现有表单中添加新表单元素?,javascript,html,forms,Javascript,Html,Forms,当锚定标记被单击时,如何添加另一个空表单元素 这是我使用的代码: <div class="nav_left"> <form name="frm" action="#" method="post" onsubmit="return frm_onsubmit();"> <table> <tbody><tr> <td colspan="2"><h2 id="title">Add Time G
<div class="nav_left">
<form name="frm" action="#" method="post" onsubmit="return frm_onsubmit();">
<table>
<tbody><tr>
<td colspan="2"><h2 id="title">Add Time Group</h2></td>
</tr>
<tr>
<td><input name="action" id="action" value="add" type="hidden"></td>
</tr>
<tr>
<td colspan="2"><h5>Time Group<hr></h5></td>
</tr>
<tr>
<td><a href="javascript:void(null)" title="This will display as the name of this Time Group." class="info" >Description</a></td>
<td><input name="description" id="description" size="35" tabindex="1" value="" type="text"></td>
</tr>
<tr>
<td colspan="2"><h5>New Time<hr></h5></td>
</tr>
<tr><td colspan="2">
<table><tbody>
<tr><td>Time to start:</td><td>
<select name="hour_start">
<option value="" selected="">-</option>
<option value="01"> 01</option><option value="2"> 02</option><option value="3"> 03</option><option value="4"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option>
</select> : 
<select name="minute_start">
<option value="00" selected=""> 00</option>
<option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option><option value="25"> 25</option><option value="26"> 26</option><option value="27"> 27</option><option value="28"> 28</option><option value="29"> 29</option><option value="30"> 30</option><option value="31"> 31</option><option value="32"> 32</option><option value="33"> 33</option><option value="34"> 34</option><option value="35"> 35</option><option value="36"> 36</option><option value="37"> 37</option><option value="38"> 38</option><option value="39"> 39</option><option value="40"> 40</option><option value="41"> 41</option><option value="42"> 42</option><option value="43"> 43</option><option value="44"> 44</option><option value="45"> 45</option><option value="46"> 46</option><option value="47"> 47</option><option value="48"> 48</option><option value="49"> 49</option><option value="50"> 50</option><option value="51"> 51</option><option value="52"> 52</option><option value="53"> 53</option><option value="54"> 54</option><option value="55"> 55</option><option value="56"> 56</option><option value="57"> 57</option><option value="58"> 58</option><option value="59"> 59</option>
</select>
</td></tr>
<tr><td>Time to finish:</td><td>
<select name="hour_finish">
<option value="" selected="">-</option>
<option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option>
</select> : 
<select name="minute_finish">
<option value="00" selected=""> 00</option>
<option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option><option value="25"> 25</option><option value="26"> 26</option><option value="27"> 27</option><option value="28"> 28</option><option value="29"> 29</option><option value="30"> 30</option><option value="31"> 31</option><option value="32"> 32</option><option value="33"> 33</option><option value="34"> 34</option><option value="35"> 35</option><option value="36"> 36</option><option value="37"> 37</option><option value="38"> 38</option><option value="39"> 39</option><option value="40"> 40</option><option value="41"> 41</option><option value="42"> 42</option><option value="43"> 43</option><option value="44"> 44</option><option value="45"> 45</option><option value="46"> 46</option><option value="47"> 47</option><option value="48"> 48</option><option value="49"> 49</option><option value="50"> 50</option><option value="51"> 51</option><option value="52"> 52</option><option value="53"> 53</option><option value="54"> 54</option><option value="55"> 55</option><option value="56"> 56</option><option value="57"> 57</option><option value="58"> 58</option><option value="59"> 59</option>
</select>
</td></tr>
<tr><td>Week Day Start:</td><td>
<select name="day_start">
<option value="">-</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option>
</select></td></tr>
<tr><td>Week Day finish:</td><td>
<select name="day_finish">
<option value="">-</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option>
</select></td></tr>
</tbody>
</table></td>
</tr> <tr>
<td colspan="2"><h6><input name="submit" tabindex="1" value="Submit" type="submit"></h6></td>
</tr>
</tbody>
</table><!-- end of table frm_timegroups -->
</form>
</td>
</tr>
</tbody></table>
</div>
<!--NAVIGATION ON LEFT-->
<!--NAVIGATION ON RIGHT-->
<div class="rnav">
<ul>
<li><a class="current" href="addgroup.php">Add Time Group</a></li>
<li><a class="current_validation" href="#">LINK 1 </a> </li>
</ul>
</div>
添加时间组
时间组
新时间
开始时间:
-
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
 : 
00
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
完成时间:
-
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
 : 
00
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
星期一开始:
-周一周二周三周四周五周六周日
星期一结束:
-周一周二周三周四周五周六周日
现在我需要创建另一个表单,其中包含空字段,当我单击链接1时,它将被限制为1,并且必须是同一表单。
对于从不调用任何表单元素的人
name=“submit”
它将阻止任何脚本提交
要创建哪些字段
以下是一种通用方法:
我在表单tbody和link中添加了ID:
<form id="frm" action="#" method="post">
<table>
<tbody id="tb_timegroups">
<a id="create" class="current_validation" href="#">LINK 1 </a>
然而,根据您的评论,我发现这一点似乎符合目的:
专门针对您的代码-请检查我添加到链接、表单和表中的ID:
函数frm_onsubmit(){
if(document.getElementById(“description”).value==“”){
返回false;//停止提交
}
返回true;//允许提交
}
window.onload=函数(){
document.getElementById(“frm”).onsubmit=frm_onsubmit;
document.getElementById(“titleLink”).onclick=function(){
document.getElementById(“description”).focus();//或其他
返回false;//而不是javascript:void
}
document.getElementById(“克隆”).onclick=function(){
var tb=document.getElementById(“timeTB”);
var allTBs=tb.querySelectorAll(“tbody”);
var fields=allTBs[allTBs.length-1].getElementsByTagName(“选择”);
var empty=false;
对于(var i=0;如果一个人从不调用任何表单元素
name=“submit”
它将阻止任何脚本提交。你想创建哪些字段?我想创建另一个select标记(开始时间、结束时间、工作日开始、工作日结束)sir请参考工作fiddle sir fiddle没有告诉我您要添加哪些字段。无论如何,我使用clone找到了一个很好的答案。请告诉我如何克隆sir???然后请参考fiddle sir谢谢先生…但是为什么提交按钮变为文本字段???有没有办法只克隆一个空字段,先生?更具体一点。你想要时间选择-现在你不想要了?提交也需要输入submit,但没有名字submit。tidy函数在属性中添加了一些尾随空格,因此“submit”
变成了“submit”
对不起,先生…我的意思是在单击时只克隆一组空字段…像这样…如果(克隆表单字段为空)=>然后=>不要克隆;否则如果(克隆表单字段为!空)=>然后=>克隆另一个;如果您访问菲律宾…我在这里…您可以联系我..我可以帮助您了解旅游景点。。
window.onload=function() {
document.getElementById("frm").onsubmit=frm_onsubmit;
document.getElementById("create").onclick=function() {
var row = document.createElement("tr"),
cell = document.createElement("td"),
field = document.createElement("input");
field.name="somename";
field.type="text";
cell.appendChild(field);
row.appendChild(cell);
document.getElementById("tb_timegroups").appendChild(row);
}
}
function frm_onsubmit() {
if (document.getElementById("description").value == "") {
return false; // stop submission
}
return true; // allow submission
}
window.onload = function () {
document.getElementById("frm").onsubmit = frm_onsubmit;
document.getElementById("titleLink").onclick = function () {
document.getElementById("description").focus(); // or whatever
return false; // instead of javascript:void
}
document.getElementById("clone").onclick = function () {
var tb = document.getElementById("timeTB");
var allTBs = tb.querySelectorAll("tbody");
var fields = allTBs[allTBs.length-1].getElementsByTagName("select");
var empty = false;
for(var i=0;i<fields.length;i++) {
if (fields[i].selectedIndex<1) {
empty = true;
break;
}
}
if (empty) {
alert("Some selects were left");
}
else {
var tb = document.getElementById("timeTB"),
clone = tb.querySelector("tbody").cloneNode(true); // copy children too
tb.appendChild(clone)
}
return false;
}
}