How can I use querySelector on to pick an input element by name?

I recently received help on this site towards using querySelector on a form input such as select but as soon as I took <select> out it completely changed what had to be done in the function.

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>

Before, I had ('select') for the querySelector, but now I'm unsure what to put there.
I've tried multiple things as well as querySelectorAll but I can't seem to figure it out.

To be clear I'm trying to pull the name="pwd".

How could I do this?

You can try '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/

I know this is old, but I recently faced the same issue and I managed to pick the element by accessing only the attribute like this: document.querySelector('[name="your-selector-name-here"]');

Just in case anyone would ever need this :)

1- you need to close the block of the function with '}', which is missing.

2- the argument of querySelector may not be an empty string '' or ' '... Use '*' for all.

3- those arguments will return the needed value:

querySelector('*')

querySelector('input')

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

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

Note: if the name includes [ or ] itself, add two backslashes in front of it, like:

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

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

So ... you need to change some things in your code

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

Try this way.

These examples seem a bit inefficient. Try this if you want to act upon the value:

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

You will encounter issue if you use this keyword with fat arrow (=>). If you need to do that, go old school:

<script>
    function joinMailingList() {
        const email = document.querySelector('#cta').value
        console.log(email)
    }
</script>

If you are working with password inputs, you should use type="password" so it will display ****** while the user is typing, and it is also more semantic.

querySelector() matched the id in document. You must write id of password in .html

Then pass it to querySelector() with #symbol & .value property.

Example:

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

form.elements.name gives better perfomance than querySelector because querySelector have to look for in entire document every time. In case with form.elements.name computer directly gets inputs from form.

I understand this is an old thread. However, for people who stepped upon this like me, you may utilize the following code.

select the input using elements collection

form.elements['pwd']

or using namedItem method under elements collection

form.elements.namedItem('pwd')