Question

I have a multiple select as below.

It allows me to select options as below. Assume that 3 sports are selected.

When the items are select as shown above form submit is successful.

But unfortunately if the sports are not selected like below when the form is submitted post is empty.

Select box

<select style="width: 100px; height: 80px;" class="input" id="selected_sport_list" name="selected_sport_list[]" multiple="">
<option value="2">sport 2</option>
<option value="3">sport 3</option>
<option value="5">sport test x</option></select>

How can I make sure that when the form is submitted particular items are selected? Is it possible to use jquery to fix this ? or how?

Thanks

Answer 1

The problem here is that the browser will not submit the values from each select box unless the user has “checked” them first. This is standard behavior and you will have to address the problem using JavaScript.

What you need to do is make sure that when the form is submitted, the HTTP request includes the values present inside each select box. You can do this in two ways:

1. Manually construct part of the submitted data and forward it to the server — e.g. by including it as part of the query string or passing a populated data object to some jQuery AJAX method, or
2. Dynamically add/remove hidden input elements to the form to match the select box state, so that when the form is submitted these input elements contain the required information (in this case you should be careful to cover the case where the user does select some options too; you don’t want double entries!)

The first option involves intercepting the form submission and submitting your own modified request through JavaScript.

The second option involves adding and removing elements to the form and can be implemented either eagerly (intercepting the transfer of elements between the select boxes and immediately mirroring the state using hidden elements) or lazily (intercepting the form submission and injecting the hidden elements on the fly).

Since at this point we don’t have all the information at hand, you should try to pick one approach from the above and provide some of the relevant code you have written.