如何在没有 id 的 JavaScript 中获取表单的 <input 值？ [复制]答案

【问题标题】：How to get the <input value of a form in JavaScript that doesn't have an id? [duplicate]如何在没有 id 的 JavaScript 中获取表单的 <input 值？ [复制]
【发布时间】：2014-11-07 13:44:49
【问题描述】：

我正在尝试在 HTML 代码中提取表单的值。表单是用 Java 脚本编写的。

这是我目前正在使用的函数，它使用的表单 id 来自：

 <!DOCTYPE html>
<html>
<body>

<form id="frm1">
            <tr>
             <td nowrap="nowrap">
              <label>Number of Panels</label>
             </td>
             <td>
              <input class="display" type="text" size="8" readonly="readonly" value="20"/>
             </td>
            </tr>
            <tr> <br>

Last name: <input type="text" name="lname" value="Duck"><br><br>
</form> 

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("frm1");
    var text = "";
    var i;
    for (i = 0; i < x.length ;i++) {
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

单击“试用”按钮后的输出将给出： 20 鸭子

我的问题是，实际脚本中没有表单 ID，因此：

    <!DOCTYPE html>
<html>
<body>

<form>
            <tr>
             <td nowrap="nowrap">
              <label>Number of Panels</label>
             </td>
             <td>
              <input class="display" type="text" size="8" readonly="readonly" value="20"/>
             </td>
            </tr>
            <tr> <br>

Last name: <input type="text" name="lname" value="Duck"><br><br>
</form> 

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("frm1");
    var text = "";
    var i;
    for (i = 0; i < x.length ;i++) {
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

我怎样才能得到这个没有 Id 的表单的值？

干杯！

【问题讨论】：

你可以试试document.getElementsByTagName("form")
Steven V，它不是重复的 :) 我的表单本身没有 id="xxx" 而不是

标签： javascript html forms input

【解决方案1】：

在现代浏览器（和 IE8）中，您可以使用 document.querySelector 来使用任何 CSS selector 来查找元素。

例如，在您的情况下，您可以使用

var x = document.querySelector('[action="form_action.asp"]');

...通过其action 属性的值来查找它。您的其余功能不会改变。

querySelector 找到 first 匹配元素。如果你想要一个所有匹配元素的列表，你可以使用querySelectorAll。例如，在您的情况下，如果您想要表单中的 input 元素列表，您可以这样做：

var elements = document.querySelectorAll('[action="form_action.asp"] input');

例如：

function myFunction() {
    var elements = document.querySelectorAll('[action="form_action.asp"] input');
    var text = "";
    var i;
    for (i = 0; i < elements.length ;i++) {
        text += elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
}

【讨论】：

感谢您的回复。如果我什么都没有，但和 action="form_action.asp" 不存在怎么办。因为这就是我正在处理的事情。

@AhmadK：那为什么你的问题是action？无论如何，要点是：任何你能想出的与表单或其中的元素相匹配的 CSS 选择器都可以让你通过querySelector 或querySelectorAll 获得它们。

非常感谢先生，您刚刚解决了我的问题:)

【解决方案2】：

你可以这样做：

var x = document.forms[0];

对于输入，您可以直接使用document.getElementsByTagName("input")[index]

【讨论】：

不工作，还有其他建议吗？