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

时间:2013-03-01 01:02:50

标签: javascript

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

我怎么能这样做?

8 个答案:

答案 0 :(得分:76)

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

答案 1 :(得分:3)

1-您需要用'}'关闭该函数的块,

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

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

select * from table
where value in (and here is this xml document)

答案 2 :(得分:2)

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

以防万一有人需要此:)

答案 3 :(得分:1)

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

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

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

答案 4 :(得分:0)

这些例子似乎效率低下。如果你想对价值采取行动,试试这个:

<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",以便在用户输入时显示******,并且它也更具语义性。

答案 5 :(得分:0)

所以......你需要改变代码中的一些东西

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

试试这种方式。

答案 6 :(得分:0)

querySelector()与文档中的ID相匹配。您必须在.html

中输入密码ID

然后将其与querySelector()传递给#symbol & .value property

示例:

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

答案 7 :(得分:0)

form.elements.name 提供比 querySelector 更好的性能,因为 querySelector 每次都必须在整个文档中查找。如果使用 form.elements.name 计算机直接从表单获取输入。