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

IT技术 javascript
2021-02-24 17:38:40

我最近在这个网站上收到了关于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')for querySelector，但现在我不确定该放什么。
我也尝试了很多东西，querySelectorAll但我似乎无法弄清楚。

明确地说，我正在尝试将name="pwd".

我怎么能这样做？

6个回答

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

周围的引号pwd似乎没有必要
2021-04-28 17:38:40
不过，我尝试没有它，以及此代码的多个其他版本，我会继续找到答案，当我找到答案时，我会在这里发布，但感谢您的时间:)
2021-05-04 17:38:40
我试过了，但似乎没有任何反应，我也没有收到警报
2021-05-13 17:38:40
嗯，wth .. 我已经试过很多次了，但它仍然不能用这种方法工作，但它在 jsfiddle 中有效？我错过了什么吗？它也显示在地址栏中，所以我知道它正在获取输入，只是我没有收到任何警报
2021-05-18 17:38:40
@AnthonyTobuscus：如果您的代码中仍然包含该debugger;语句，则这可能会导致其余代码无法执行，因为它会停止该行的执行。
2021-05-21 17:38:40

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

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

只是共享，要获取值，只需.value在此代码的末尾添加，例如：document.querySelector('[name="your-selector-name-here"]').value
2021-04-27 17:38:40
@HowardBrown 但如果你想拥有元素数组，querySelectorAll 会不会更好？
2021-04-28 17:38:40
Chrome 版本 78.0.3904.70（官方版本）（64 位）使用 querySelector 和 name 属性只返回第一个元素，所以你不能使用数组访问来访问集合中的任何其他单选按钮。相反，您需要为每个单选按钮分配一个唯一的 id 或值（这是区分单选按钮的正常方法）。所以随着 document.getElementsByName() 在 HTML5 中被贬低，document.querySelector('[name="radio-button-name"][value="unique-value"]') 是最好的替代品。
2021-05-07 17:38:40

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 name="array[child]" ...

document.querySelector("[name=array\\[child\\]]");
其它你可能感兴趣的问题
上一篇可以解释 JavaScript 的网络爬虫 下一篇React - 未安装组件上的 setState()