107

我最近在这个网站上收到了关于使用querySelector表单输入的帮助，select但是一旦我拿出<select>它就完全改变了函数中必须做的事情。

HTML：

<form onsubmit="return checkForm()">
    Password: <input type="text" name="pwd">
    <input type="submit" value="Submit">
</form>

Javascript：

<script language="Javascript" type="text/javascript">
    debugger;
    function checkForm() {
        var form = document.forms[0];
        var selectElement = form.querySelector('');
        var selectedValue = selectElement.value;

        alert(selectedValue);
</script>

以前，我有('select')，querySelector但现在我不确定该放什么。
我也尝试了多种方法，querySelectorAll但我似乎无法弄清楚。

需要明确的是，我正在尝试拉动name="pwd".

我怎么能这样做？

4

9 回答 9

157

你可以试试'input[name="pwd"]'：

function checkForm(){
     var form = document.forms[0];
     var selectElement = form.querySelector('input[name="pwd"]');
     var selectedValue = selectElement.value;
}

看看这个http://jsfiddle.net/2ZL4G/1/

于 2013-03-01T01:07:21.873 回答
34

我知道这是旧的，但我最近遇到了同样的问题，我设法通过只访问这样的属性来选择元素：document.querySelector('[name="your-selector-name-here"]');

以防万一有人需要这个:)

于 2019-06-11T20:20:08.350 回答
19

1-您需要使用缺少的'}'关闭函数块。

2- querySelector 的参数不能是空字符串 '' 或 ' '... 全部使用 '*'。

3-这些参数将返回所需的值：

querySelector('*')

querySelector('input')

querySelector('input[name="pwd"]')

querySelector('[name="pwd"]')
于 2018-10-30T13:32:41.387 回答
2

注意：如果名称包含[or]本身，则在其前面添加两个反斜杠，例如：

<input name="array[child]" ...

document.querySelector("[name=array\\[child\\]]");
于 2021-01-22T18:26:41.283 回答
2

所以...您需要更改代码中的一些内容

<form method="POST" id="form-pass">
Password: <input type="text" name="pwd" id="input-pwd">
<input type="submit" value="Submit">
</form>

<script>
var form = document.querySelector('#form-pass');
var pwd = document.querySelector('#input-pwd');
pwd.focus();
form.onsubmit = checkForm;

function checkForm() {
  alert(pwd.value);
}
</script>

试试这个方法。

于 2018-05-07T06:41:22.993 回答
1

form.elements.name提供比每次都在整个文档中查找更好的性能querySelector。querySelector如果form.elements.name计算机直接从表单获取输入。

于 2021-04-17T09:38:47.110 回答
1

这些例子似乎有点低效。如果你想对这个值采取行动，试试这个：

<input id="cta" type="email" placeholder="Enter Email...">
<button onclick="return joinMailingList()">Join</button>

<script>
    const joinMailingList = () => {
        const email = document.querySelector('#cta').value
        console.log(email)
    }
</script>

如果您使用this带有粗箭头 ( =>) 的关键字，您会遇到问题。如果你需要这样做，去老学校：

<script>
    function joinMailingList() {
        const email = document.querySelector('#cta').value
        console.log(email)
    }
</script>

如果您正在使用密码输入，您应该使用type="password"它，以便在用户键入时显示 ******，并且它也更具语义。

于 2017-09-07T06:22:38.303 回答
1

querySelector()匹配文档中的 id。您必须在.html

然后将其传递给querySelector()with #symbol & .value property。

例子：

let myVal = document.querySelector('#pwd').value

于 2019-03-14T08:14:37.960 回答
0

我知道这是一个旧线程。但是，对于像我这样踩过它的人，您可以使用以下代码。

使用元素集合选择输入

form.elements['pwd']

或在元素集合下使用 namedItem 方法

form.elements.namedItem('pwd')
于 2021-11-15T21:45:18.063 回答