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: https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box — Martin, Aug 27 '18 at 12:59

Luca Kiebel · Answer 1 · 2018-08-27T13:16:21.793

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 '18 at 13:16

answered Aug 27 '18 at 12:58

Luca Kiebel

9,790
7
29
44

Thanks Luca by this i am able to check values can you suggest a way to get keys also. – Passionate Coder Aug 27 '18 at 13:08
@Luca Why we not use getElementsByName() – Bharat Dangar Aug 27 '18 at 13:18
1

@BharatDangar Because getElementsByName, to my knowledge, neither supports substring matching, nor a native method for getting elements that have an array-like name construct – Luca Kiebel Aug 27 '18 at 13:22
Yes,Got it.Thanks for reply to my comment. – Bharat Dangar Aug 27 '18 at 13:26

KarelG · Accepted Answer · 2018-08-27T13:15:42.740

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>

score 0 · Answer 3 · answered Aug 27 '18 at 12:57

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 '18 at 12:57

Jasmin Mistry

1,459
1
18
23

score 0 · Answer 4 · answered Aug 27 '18 at 13:02

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]

How to get multiple select list data in js?

4 Answers4