CODEWITHSUNDEEP
javascriptjqueryformspost
Will Curran
Will Curran

Reputation: 7110

How to build a List parameter using JQuery from multiple select inputs?

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>

Upvotes: 0

Views: 2320

Answers (2)

machineghost
machineghost

Reputation: 35790

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

Upvotes: 1

ehynds
ehynds

Reputation: 4463

Perhaps join the keys array with a comma?

Upvotes: 0

Related Questions