javascript - 如何从嵌套输入访问 html 表单值

Question

我正在尝试验证此表单中的输入:

        <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 时它们不为空。

Answer 1

您可以尝试删除 extraRowTemplate 并提交吗？如果它有效，那么您可以尝试使用不同的 id 生成内部元素，因为现在您有没有区别的重复项。