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

Question

I recently received help on this site towards using querySelector on a form input such as select but as soon as I took  lt select gt  out it completely changed what had to be done in the function   HTML    lt form onsubmit  return checkForm    gt      Password   lt input type  text  name  pwd  gt       lt input type  submit  value  Submit  gt   lt  form gt    Javascript    lt script language  Javascript  type  text javascript  gt      debugger      function checkForm             var form   document forms 0           var selectElement   form querySelector              var selectedValue   selectElement value           alert selectedValue    lt  script gt    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

User · Answer

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

User · Answer

Note  if the name includes   or   itself  add two backslashes in front of it  like   lt input name  quot array child  quot       document querySelector  quot  name array   child     quot

User · Answer

So     you need to change some things in your code   lt form method  POST  id  form-pass  gt  Password   lt input type  text  name  pwd  id  input-pwd  gt   lt input type  submit  value  Submit  gt   lt  form gt    lt script gt  var form   document querySelector   form-pass    var pwd   document querySelector   input-pwd    pwd focus    form onsubmit   checkForm   function checkForm       alert pwd value      lt  script gt    Try this way

User · Answer

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

User · Answer

querySelector   matched the id in document  You must write id of password in  html  Then pass it to querySelector   with  symbol  amp   value property   Example   let myVal   document querySelector   pwd   value

User · Answer

These examples seem a bit inefficient  Try this if you want to act upon the value    lt input id  cta  type  email  placeholder  Enter Email     gt   lt button onclick  return joinMailingList    gt Join lt  button gt    lt script gt      const joinMailingList        gt            const email   document querySelector   cta   value         console log email         lt  script gt    You will encounter issue if you use this keyword with fat arrow    gt    If you need to do that  go old school    lt script gt      function joinMailingList             const email   document querySelector   cta   value         console log email         lt  script gt    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

User · Answer

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

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

Examples related to javascript