我正在尝试验证此表单中的输入：
<form id = "mpath" name = "mpath" action = './../cgitest.cgi' method="POST" onsubmit = "return validateForm(this)">
Total Time (in ms): <input type = "text" name = "ttime">
Number of Cars (1-10): <input type = "text" name = "carnum">
Initial Speed (fps): <input type = "text" name = "initspeed"><br>
<!--extraRowTemplate will be repeated for every change in the accleration of the
head car -->
<p class = "extraRowTemplate" name = "extraRowTemplate">
Change:
<select name="change">
<option value="acc">Acceleration</option>
<option value="dec">Deceleration</option>
</select>
Start time: <input type = "text" name="starttime">
End time: <input type = "text" name="endtime">
Amount (in fps): <input type = "text" name="amount"><br>
</p>
<div id = 'container'></div>
<a href="#" id = "addRow"><i class="icon-plus-sign"></i>Add Change</a><br>
<input type="submit" value="Load Head Car">
</form>
使用此功能（我没有写过任何实际的验证）：
<script type="text/javascript">
function validateForm(form){
var tt = document.forms[0].ttime.value;
var cn = document.forms[0].carnum.value;
var is = document.forms[0].initspeed.value;
var sta = form.elements[4].value;
console.log(tt);
console.log(cn);
console.log(is);
console.log(sta);
if(tt == ""){
alert("starttime must be filled out");
return false;
}
//return false;
}
</script>
但是当我尝试提交值时，它只会找到ttime，carnum和initspeed的值，而不是starttime，endtime或amount的值。此外，即使我将其设置为“减速”，变化值也始终为“acc”。
对于那些想知道为什么我不简单地删除extraRowTemplate的人，我需要在嵌套部分中有这些输入选项，因为我有一个复制它们的选项。
我试图将表单作为参数传递给函数（如图所示），并且只使用document.forms [0]来访问它。都没有产生正确的结果。
另外，当我从form.elements [4] .value中删除.value并设置：
var sta = form.elements[4];
控制台打印出来：
<input type = "text" name = "starttime">
有谁知道如何访问嵌套输入的值？
我想我也应该说这个表单能够以其他方式正常工作，当我将它发送到cgitest.cgi时，我可以访问所有输入。我只是不想验证服务器端的输入。
编辑：
如果不是使用onsubmit函数（在我的情况下是validateForm），我使用事件监听器：
<script type="text/javascript">
var button = document.querySelector('input[type=submit]')
button.addEventListener('click', function onClick(event) {
var ttime = document.querySelector('input[name=ttime]')
var carnum = document.querySelector('input[name=carnum]')
var initspeed = document.querySelector('input[name=initspeed]')
var change = document.querySelector('select[name=change]')
var starttime = document.querySelector('input[name=starttime]')
var endtime = document.querySelector('input[name=endtime]')
var amount = document.querySelector('input[name=amount]')
console.info('ttime', ttime.value)
console.info('carnum', carnum.value)
console.info('initspeed', initspeed.value)
console.info('change', change.value)
console.info('starttime', starttime.value)
console.info('endtime', endtime.value)
console.info('amount', amount.value)
event.preventDefault()
})
</script>
输入ttime = 1，carnum = 2，initspeed = 3，change =“acc”，starttime = 4，endtime = 5，amount = 6，我得到以下控制台输出：
(index):70 ttime 1
(index):71 carnum 2
(index):72 initspeed 3
(index):73 change acc
(index):74 starttime
(index):75 endtime
(index):76 amount
可以看出，超越initspeed的所有值（extraRowTemplate中的所有内容）都是空的。就像我之前说的那样，当发送到表单动作URL时，它们不是空的。
答案 0 :(得分：0)
您可以尝试删除extraRowTemplate并提交。如果它正在工作，那么你可以尝试使用不同的id生成内部元素，因为现在你有重复的项目没有区别。
答案 1 :(得分：0)
您目前正在使用document.forms[0].以迂回方式访问元素。此外，我没有看到任何代码来获取starttime输入的值。您正在tt中测试if，但已为其分配ttime的值。
我可以建议使用document.querySelector直接按名称访问表单元素吗？此方法接受CSS选择器并返回匹配的第一个元素。使用简单的CSS3选择器，我们可以按名称选择元素，并假设这些名称在页面上是唯一的，我们将获得正确的输入。如果名称在表单中唯一，您也可以使用form.querySelector。
var myInput = document.querySelector('input[name=ttime]')
我发现document.querySelector和document.querySelectorAll（它获取与CSS选择器匹配的所有元素）非常有用，并且一直使用它们。
运行此代码段并按表单提交按钮以打印输入值。试一试，看看它是如何运作的。
var button = document.querySelector('input[type=submit]')
button.addEventListener('click', function onClick(event) {
var ttime = document.querySelector('input[name=ttime]')
var carnum = document.querySelector('input[name=carnum]')
var initspeed = document.querySelector('input[name=initspeed]')
var change = document.querySelector('select[name=change]')
var starttime = document.querySelector('input[name=starttime]')
var endtime = document.querySelector('input[name=endtime]')
var amount = document.querySelector('input[name=amount]')
console.info('ttime', ttime.value)
console.info('carnum', carnum.value)
console.info('initspeed', initspeed.value)
console.info('change', change.value)
console.info('starttime', starttime.value)
console.info('endtime', endtime.value)
console.info('amount', amount.value)
event.preventDefault()
})<form id = "mpath" name = "mpath" action = './../cgitest.cgi' method="POST" onsubmit = "return validateForm(this)">
Total Time (in ms): <input type = "text" name = "ttime">
Number of Cars (1-10): <input type = "text" name = "carnum">
Initial Speed (fps): <input type = "text" name = "initspeed"><br>
<!--extraRowTemplate will be repeated for every change in the accleration of the
head car -->
<p class = "extraRowTemplate" name = "extraRowTemplate">
Change:
<select name="change">
<option value="acc">Acceleration</option>
<option value="dec">Deceleration</option>
</select>
Start time: <input type = "text" name="starttime">
End time: <input type = "text" name="endtime">
Amount (in fps): <input type = "text" name="amount"><br>
</p>
<div id = 'container'></div>
<a href="#" id = "addRow"><i class="icon-plus-sign"></i>Add Change</a><br>
<input type="submit" value="Load Head Car">
</form>
答案 2 :(得分：0)
我可以使用
访问Firefox / Chrome / Opera中“starttime”字段的值var sta = document.forms[0][4].value
或
var sta = document.forms[0].starttime.value
答案 3 :(得分：0)
我能够弄清楚出了什么问题。在我的CSS中，我设置：
.extraRowTemplate {
display: none;
}
阻止了输入值的发送。一旦我删除了这个，我的问题就消失了。设置“visibility：hidden”是一个很好的选择，它允许提交值并且模板不可见。