How to get multiple select list data in js?

Question

<form onsubmit = "return checkForm(this)" method="POST" action = "">
<select name="user[11]">
     <option value='1'>one</option>  
     <option value='2'>two</option> 
</select>

<select name="user[12]">
     <option value='1'>one</option>  
     <option value='2'>two</option> 
</select>

</form>

I need to get select box values with keys (which i will use for update user)

im using below function

function checkForm(frm){
  var inps = document.getElementsByName('user[]');
  console.log(inps );// but its displaying blank nodelist
}

Please give your valueable suggestions

Could take a look at: stackoverflow.com/questions/5866169/… — Martin
– Martin, Commented Aug 27, 2018 at 12:59

Luca Kiebel · Accepted Answer · 2018-08-27 13:16:21Z

2

You can use document.querySelectorAll() and a wildcard for the name attribute:

[name^="user["]

This means, find all elements that have a name property starting with user[.

If you want to get the keys from the name property, map it like so:

userArray.map(element => Number(element.name.match(/\d+/)[0]));

let userArray = Array.from(document.querySelectorAll('[name^="user["]'));

let userArrayKeys = userArray.map(element => Number(element.name.match(/\d+/)[0]));

console.log("Matched elements",userArray);

console.log("Their Keys", userArrayKeys);

<form onsubmit="return checkForm(this)" method="POST" action="">
  <select name="user[11]"> <!-- I will get selected -->
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>

  <select name="user[12]"> <!-- I will get selected -->
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>
  
  <select name="update[12]"> <!-- I will not get selected -->
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>
</form>

You should give your input fields names that better reflect what data they hold, though.

edited Aug 27, 2018 at 13:16

answered Aug 27, 2018 at 12:58

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Passionate Coder Over a year ago

Thanks Luca by this i am able to check values can you suggest a way to get keys also.

Bharat Dangar Over a year ago

@Luca Why we not use getElementsByName()

Luca Kiebel Over a year ago

@BharatDangar Because getElementsByName, to my knowledge, neither supports substring matching, nor a native method for getting elements that have an array-like name construct

KarelG · Accepted Answer · 2018-08-27 13:15:42Z

That is a weird tag naming (I do not recommend the use of [ and ] in attribute values.) You can solve it by using document.querySelectorAll which allows you to select elements with CSS selectors.

I have used

document.querySelectorAll('select[name^="user["]')

The ^= is a part of the 6.2. Substring matching attribute selectors. [name^="user["] means "select where the name attribute begins with "user[".". This will select elements with user[1] but also user[2] or user[2][1] or users[hello] or users[hello or users[hello...

console.log(document.querySelectorAll('select[name^="user["]'));

<form onsubmit = "return checkForm(this)" method="POST" action = "">
<select name="user[11]">
     <option value='1'>one</option>  
     <option value='2'>two</option> 
</select>

<select name="user[12]">
     <option value='1'>one</option>  
     <option value='2'>two</option> 
</select>

</form>

Jasmin Mistry · Accepted Answer · 2018-08-27 12:57:48Z

0

YOu have to select by below

function checkForm(frm){
  var inps1 = document.getElementsByName('user[11]');
  console.log(inps1 );
  var inps2 = document.getElementsByName('user[12]');
  console.log(inps2 );
}

answered Aug 27, 2018 at 12:57

Jasmin Mistry

1,4861 gold badge19 silver badges25 bronze badges

Comments

AymDev · Accepted Answer · 2018-08-27 13:02:09Z

0

Except if the user indexes are needed you can skip them like:

<select name="user[]">...</select>
<select name="user[]">...</select>

<!-- $_POST values:
    [user] => Array
    (
        [0] => 1
        [1] => 1
    )
-->

And then get them as you tried:

console.log(document.getElementsByName('user[]'));
// NodeList(2) [select, select]

answered Aug 27, 2018 at 13:02

AymDev

7,7234 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to get multiple select list data in js?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related