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

我最近在这个网站上收到帮助，使用 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"。

我怎么能这么做？

382914 次浏览
小开

您可以尝试“ input [ name = “ pwd”]”:

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

take a look a this http://jsfiddle.net/2ZL4G/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"，以便在用户输入时显示 * * * * * * * * ，而且它也更具语义性。

小开

所以... 你需要修改代码中的一些内容

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

试试这边。

小开

1-您需要用“}”关闭函数的块，这个块丢失了。

2-querySelector 的参数不能是空字符串”或“ ... 使用’*’表示所有字符串。

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

querySelector('*')


querySelector('input')


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


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

querySelector()与文档中的 id 匹配。必须在 .html中写入密码的 id

然后用 #symbol & .value property把它传给 querySelector()。

例如:

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

小开

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

以防有人需要这个:)

小开

注意: 如果名称包括 [或 ]本身，在它前面加两个反斜杠，如:

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


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

form.elements.name的性能优于 querySelector，因为 querySelector每次都必须在整个文档中查找。如果与 form.elements.name计算机直接从形式获得输入。

小开

我知道这是条老线索了。但是，对于像我这样的人，您可以使用以下代码。

使用元素集合选择输入

form.elements['pwd']

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

form.elements.namedItem('pwd')

提交答案