时间戳

首页 > 解决方案 > getElementByName 不适用于 html 表中的输入/选择元素

javascript - getElementByName 不适用于 html 表中的输入/选择元素

问题描述

如果这是重复的话，appols，但我在任何地方都找不到类似的问题。我有许多选择和输入元素，其中包含 td 元素作为表的一部分，我想在 Javascript 中收集一些验证的值。我希望使用 getElementsByName javascript 来收集所述数据，但看起来好像表中的这些元素“未”收集（所有节点列表都是空列表）......但是，getElementById 似乎确实适用于这些元素值。

这是无法使用 getElementsByName 的已知场景吗？

下面是我的代码的摘录（我把它做成了一个简短的版本，因为实际的表是一个更大的日志，但更容易阅读：

`fc = document.getElementsByName('forwarding_class');
min_bw = document.getElementsByName('min_bw');
exact =  document.getElementsByName('exact');

//Do some validation on node list fc etc.....

<form action="#" method="post" class="form-horizontal">
            <div class="row">
                <div class="col-sm-10">
                    <table id="cos_policy" name="cos_policy" class="display table table-hover table-bordered table-striped">
                        <thead>
                            <tr style="background-color: #7E0305; color: white;">
                                <th style="width: 10%; text-align:center;">Forwarding Class</th>
                                <th style="width: 10%; text-align:center;">Min BW(%)</th>           
                                <th style="width: 10%; text-align:center;">Exact</th>
                            </tr>
                        </thead>
                        <tbody id="cos_policy_table_body">
<tr>
<td hidden=""><input name="class_table[]" id="class_table0" value="GWR"></td>
<td hidden=""><input name="id[]" value="" hidden="" id="id0"></td>
<td><select name="forwarding_class[]" id="forwarding_class0" class="form-control">
<option value="">Select One</option>
<option value="VF-Premium">VF-Premium</option>
<option value="VF-Enhanced1">VF-Enhanced1</option>
</select></td>
<td><input class="form-control" id="min_bw0" name="min_bw[]" style="width: 100%;" value=""></td>
<td><select name="exact[]" id="exact0" class="form-control" style="width: 100%;">
<option value="">Select One</option><option value="True">True</option>
<option value="False">False</option>
</select></td>
</tr><tbody>
    </form>`

标签： javascripthtml

解决方案

您已将输入的name属性定义为forwarding_class[]和。因此，您也必须在选择器中使用相同的值。min_bw[]exact[]

你的选择器应该是

fc = document.getElementsByName('forwarding_class[]');
min_bw = document.getElementsByName('min_bw[]');
exact =  document.getElementsByName('exact[]');


fc = document.getElementsByName('forwarding_class[]');
min_bw = document.getElementsByName('min_bw[]');
exact =  document.getElementsByName('exact[]');
console.log(fc);
console.log(min_bw);
console.log(exact); 
<form action="#" method="post" class="form-horizontal">
  <div class="row">
    <div class="col-sm-10">
      <table id="cos_policy" name="cos_policy" class="display table table-hover table-bordered table-striped">
        <thead>
          <tr style="background-color: #7E0305; color: white;">
            <th style="width: 10%; text-align:center;">Forwarding Class</th>
            <th style="width: 10%; text-align:center;">Min BW(%)</th>
            <th style="width: 10%; text-align:center;">Exact</th>
          </tr>
        </thead>
        <tbody id="cos_policy_table_body">
          <tr>
            <td hidden=""><input name="class_table[]" id="class_table0" value="GWR"></td>
            <td hidden=""><input name="id[]" value="" hidden="" id="id0"></td>
            <td><select name="forwarding_class[]" id="forwarding_class0" class="form-control">
                <option value="">Select One</option>
                <option value="VF-Premium">VF-Premium</option>
                <option value="VF-Enhanced1">VF-Enhanced1</option>
              </select></td>
            <td><input class="form-control" id="min_bw0" name="min_bw[]" style="width: 100%;" value=""></td>
            <td><select name="exact[]" id="exact0" class="form-control" style="width: 100%;">
                <option value="">Select One</option>
                <option value="True">True</option>
                <option value="False">False</option>
              </select></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</form>

推荐阅读