Question

I need to POST a JSON String containing a List of 1 or more values from a multiple select form. In the JQuery solution I came up with, I am getting all of the values selected in the list, but they are being returned as individual parameters.

$(document).ready(function() {
  $("#fooForm").submit(function(event) {
    event.preventDefault();         
    var $form = $(this),
    loc = $form.find('input[name="location"]').val(),
    url = $form.attr('action'),
    keys = $('#people :selected').map(function(){return $(this).val();}).get();
    $.post(url, {people:keys, location:loc},
        function(data) {
          $("#result").html(data);
        }
    );
  });
});

<form id="fooForm" method="" action="/api/people/location">
  <input type="hidden" name="location" value="{{location}}" />
  <select id="people" multiple size=4>
   <option value="{{a.key}}">{{a.name}}</option>
   <option value="{{b.key}}">{{b.name}}</option>
   <option value="{{c.key}}">{{c.name}}</option>
   <option value="{{d.key}}">{{d.name}}</option>
  </select> 
  <input type="submit" value="Submit" />    
</form>

This produces the following parameters if say, three people are selected:

location     91.001,-11.23
people[] agxzdXBlcmxhcnAtc2ty_foo
people[] agxzdXBlcmxhcnAtc2ty_spam
people[] agxzdXBlcmxhcnAtc2ty_eggs

I would expect there to be a single people parameter containing the three key values.

---

UPDATE
Here’s the most elegant solution I came up with:

$(document).ready(function() {
  $("#fooForm").submit(function(event) {
    event.preventDefault();         
var dataToBeSent = $("#fooFoorm").serialize();
var url = $("#fooForm").attr('action');
    $.post(url, dataToBeSent,
        function(data) {
          $("#result").html(data);
        }, "json"
    );
  });
});

<form id="fooForm" method="" action="/api/people/location">
  <input type="hidden" name="location" value="{{location}}" />
  <select name="people" multiple size=4>
   <option value="{{a.key}}">{{a.name}}</option>
   <option value="{{b.key}}">{{b.name}}</option>
   <option value="{{c.key}}">{{c.name}}</option>
   <option value="{{d.key}}">{{d.name}}</option>
  </select> 
  <input type="submit" value="Submit" />    
</form>

Answer 1

The standard way to send a list in parameters is to use one param for each item in the list (and then it’s convention to name that param “whatever[]” to indicate that it’s a list).

Also, you really should be using a name for your SELECT, not an id; you’re not supposed to have multiple elements with the same ID on the page, and name is really the attribute for “naming” form data.

An easier way to do what you’re trying to do would be to use the jQuery serialize method. This would let you do:

keys = $("#fooForm").serialize()

However, I’m pretty sure that will do the multiple parameters thing too, so if you really must have a single parameter then you are stuck doing something like:

keys = ""
$('#people :selected').each(function(){
    keys += $(this).val() + ",";
});
// Strip off the trailing comma if present