add values to a input like "input_name[]" on change multiple select with javascript

Question

This is a hidden input I have...

 <input name="input_name[]" type="hidden"/>

I would like to add values to this input as soon as I "onchange" a multiple select options like:

<select id="inputSelect" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

The place where put the javascript o even if is a function, is irrelevant to me.

I would accept an answer for javascript solution but if someone give a jquery solution I would take as important information and I would really thank that.

Thank you very much.

alexwc_ · Accepted Answer · 2016-10-04 16:04:07Z

1

Here's a jQuery example:

$('#inputSelect').on('change', function(){
	var newVal = $(this).val();
 $('#inputHidden').val(newVal);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name="input_name[]" id="inputHidden"/>
<select id="inputSelect" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

answered Oct 4, 2016 at 16:04

alexwc_

1,5912 gold badges25 silver badges35 bronze badges

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

Comments

Brett DeWoody · Accepted Answer · 2016-10-04 16:32:57Z

0

Here is a solution using core Javascript. It works by attaching an event listener to the <select> input, then running a function to set the value of the hidden <input>.

To target the hidden <input> we can use document.getElementsByName and use the name of input_name[]. If you have more than 1 element with this name you'll need to change the index in the square brackets in inputHidden[0].value = newValue; to the correct index. In this case, since there is one element with a name of input_hidden[] we use index 0. If there were 2 elements, and you wanted to set the value of the 2nd hidden <input> you would use inputHidden[1].value = newValue;

var inputSelect = document.getElementById('inputSelect');
   
inputSelect.addEventListener('change', function() {
  var newValue = [];

  for (var i = 0; i < inputSelect.length; i++) {
    if (inputSelect[i].selected) {
      newValue.push(inputSelect[i].value);
    }
  }

  var inputHidden = document.getElementsByName('input_name[]');
  inputHidden[0].value = newValue.join(",");
});

<input name="input_name[]" type="hidden" id="inputHidden"/>
<select id="inputSelect" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

edited Oct 4, 2016 at 16:32

answered Oct 4, 2016 at 8:09

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

5 Comments

Brett DeWoody Over a year ago

@Miguel - do you have multiple Selects? In your example you're Select has an id, do the other Selects have IDs? Or classes?

Mik Over a year ago

Is a <select> where you can choose more than one <option>, I didn't say I have more than one <select>. In my example , values 1, 2,3,4 should be added to the hiden "input_name[]" input. @BrettDeWoody

Brett DeWoody Over a year ago

Yes, that is what my code example does. If you inspect the example, when you change the Select it updates the value of the hidden input.

Mik Over a year ago

I do thank you for your answer @BrettDeWoody but to be a "Multiple" <select> it should have "multiple" atribute so <input id="inpuSelect" multipe="multiple">

Brett DeWoody Over a year ago

I have updated the solution to handle selects that allow multiple selections.

Collectives™ on Stack Overflow

add values to a input like "input_name[]" on change multiple select with javascript

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related