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

我最近收到了在这个网站上使用querySelector在表单输入如select上的帮助，但是一旦我把<select>拿出来，它完全改变了该函数中必须完成的工作。如何使用querySelector按名称选择输入元素？

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"。

我该怎么做？

来源

2013-03-01 Anthony Tobuscus

'querySelector'方法采用'selector'参数。 'selector'参数是一个字符串，它包含一个或多个由逗号分隔的CSS选择器。如果你坚持有效的选择器，MDN在[**选择器**]（https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selector）上有一个很棒的页面。当然，你总是可以在SO上获得帮助。我只是想你可能会发现页面一本方便的有一般:)再次感谢 – Nope 2013-03-01 12:36:25

：d – 2013-03-01 14:53:15

你可以试试 '输入[名称= “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-01 01:07:21 AlexCheuk

我尝试过，但似乎没有回我，我没有得到任何警告 – 2013-03-01 01:14:27

嗯，问心无愧。我已经试过这使很多次，它仍然无法使用此方法的工作，但它的jsfiddle作品？我错过了什么吗？此外它显示在地址栏，所以我知道它越来越投入，只是我没有得到任何警报 – 2013-03-01 01:39:41

@AnthonyTobuscus：如果您的代码仍然有'调试;'声明它比这可能会导致代码的其余部分不执行，因为它会停止该行的执行。 – Nope 2013-03-01 11:24:21

这些例子似乎有点效率低下。如果你想在价值行事试试这个：

<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关键字脂肪箭头（=>）您可能会遇到的问题。如果你需要做的是，去老同学：

如果您正在使用密码的输入工作，你应该使用type="password"所以它会显示******当用户键入，并且它也是更多的语义。

来源

2017-09-07 06:22:38 agm1984

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

回答

相关问题