[英]How can I use querySelector on to pick an input element by name?
我最近在这个站点上收到了关于在诸如select
类的表单输入上使用querySelector
帮助,但是一旦我取出<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"
。
我怎么能这样做?
你可以试试 'input[name="pwd"]':
function checkForm(){
var form = document.forms[0];
var selectElement = form.querySelector('input[name="pwd"]');
var selectedValue = selectElement.value;
}
我知道这是旧的,但我最近遇到了同样的问题,我设法通过只访问这样的属性来选择元素: document.querySelector('[name="your-selector-name-here"]');
以防万一有人需要这个:)
1- 您需要使用缺少的“}”关闭函数块。
2- querySelector 的参数不能是空字符串 '' 或 ' '... 全部使用 '*'。
3- 这些参数将返回所需的值:
querySelector('*')
querySelector('input')
querySelector('input[name="pwd"]')
querySelector('[name="pwd"]')
所以......你需要改变你的代码中的一些东西
<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>
试试这个方法。
这些例子似乎有点低效。 如果你想对值采取行动,试试这个:
<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"
以便在用户输入时显示 *****,并且它也更具语义。
注意:如果名称包含[
或]
本身,请在其前面添加两个反斜杠,例如:
<input name="array[child]" ...
document.querySelector("[name=array\\[child\\]]");
querySelector()
匹配文档中的 id。 您必须在.html
写入密码的 id
然后将其传递给带有#symbol & .value property
querySelector()
。
例子:
let myVal = document.querySelector('#pwd').value
form.elements.name
比querySelector
提供更好的性能,因为querySelector
每次都必须在整个文档中查找。 如果使用form.elements.name
计算机直接从表单获取输入。
我知道这是一个旧线程。 但是,对于像我这样踩到这个的人,您可以使用以下代码。
使用元素集合选择输入
form.elements['pwd']
或在元素集合下使用 namedItem 方法
form.elements.namedItem('pwd')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.