如何使用querySelector on按名称选择输入元素？

Question

我最近在这个网站上收到了关于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".

我怎么能这样做？

Answer 1

你可以试试'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/

Answer 2

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

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

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

querySelector('*')

querySelector('input')

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

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

Answer 3

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

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

document.querySelector("[name=array\\[child\\]]");

Answer 4

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

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