Add array values to hidden form field

Question

I am trying to add comma separated values to a hidden form field for later processing using the change of a dropdown menu as my trigger.

$("#artistselect").change(function() {
  var allids = [];

  allids.push($(this).children(":selected").attr("id"));

  $("input[name=artistslist]").attr("value", $(allids).append(allids + ", "));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="artistselect">
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
  </select>
  <input type="hidden" name="artistslist" value="" />
</form>

Best I can manage is to get the value to change to the selected dropdown, but it wont add them together with the commas.

What is the purpose of allids.push($(this).children(":selected").attr("id")); — brk
– brk, Commented Oct 24, 2016 at 18:35

MrCode · Accepted Answer · 2016-10-24 18:42:10Z

3

Move var allids=[]; out of the event because you're destroying it every time it fires.

var allids=[];

$("#artistselect").change(function() {
    allids.push($(this).children(":selected").attr("id"));

     $("input[name=artistslist]").val(allids.join(', '));
});

On the last line you can use Array.prototype.join to get a comma separated string from the array.

Not sure why you are using .attr("id") when your html shows your options with no id attribute. Looks like you want value not id.

edited Oct 24, 2016 at 18:42

answered Oct 24, 2016 at 18:36

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

2 Comments

Dustin Over a year ago

This sort of works, except I am getting <input type="hidden" name="artistslist" id="artistlistecho" value="13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15"> in my hidden field...

Dustin Over a year ago

nevermind, I derped, the javasript was inside a php while loop. your code works perfectly. thank you!

Barmar · Accepted Answer · 2016-10-24 18:45:16Z

You have two problems.

First, you're emptying allids every time the user selects from the menu. So when you push onto it, you lose the old values, and you just get the most recent value.

Second, $(allids).append(allids + ", ") doesn't do what you think it does. .append() is for adding something to a DOM element, not concatenating strings.

To get the value of a <select>, just use $(this).val(), you don't need to search for :selected. Your <option> elements don't have IDs, so .attr('id') won't return anything.

var allids = [];
$("#artistselect").change(function() {
  allids.push($(this).val());
  $("input[name=artistslist]").val(allids.join(", "));
});

$("#show").click(function() {
    console.log($("input[name=artistslist]").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="artistselect">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="hidden" name="artistslist" value="" />
  <button type="button" id="show">Show hidden value</button>
</form>

Collectives™ on Stack Overflow

Add array values to hidden form field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related