CODEWITHSUNDEEP
javascript
Anthony Tobuscus
Anthony Tobuscus

Reputation: 1481

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?

Upvotes: 147

Views: 541480

Answers (10)

bcag2
bcag2

Reputation: 2439

It could be interesting, especially if you have multiple forms, to use :

const selectElement = document.querySelector("form[name='form-name'] input[name='pwd']")

useful link: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#complex_selectors

Upvotes: 0

Arshia Gholami
Arshia Gholami

Reputation: 31

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

Upvotes: 3

FreePhoenix888
FreePhoenix888

Reputation: 6087

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.

Upvotes: 1

T.Todua
T.Todua

Reputation: 56351

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

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

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

Upvotes: 9

Ciprian Tepes
Ciprian Tepes

Reputation: 866

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

Upvotes: 48

Piyu
Piyu

Reputation: 19

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

Upvotes: 1

TROUZINE Abderrezaq
TROUZINE Abderrezaq

Reputation: 478

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"]')

Upvotes: 27

Cleyton Silva
Cleyton Silva

Reputation: 29

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.

Upvotes: 2

agm1984
agm1984

Reputation: 17132

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.

Upvotes: 1

AlexCheuk
AlexCheuk

Reputation: 5845

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/

Upvotes: 212

Related Questions