Home » CSS & XHTML, Javascript & Libraries, PHP/MySQL » POSTing unselected OPTIONS in a SELECT tag

0

When a form is submitted to the server, only selected values in a multiple SELECT box reaches the server. It is not possible to access the unselected options in a SELECT box from the server. Though this is not really required always, there are situations where you would want to access all the options in a SELECT tag. One example is, when you allow users to select and move options from one SELECT box to another and the second SELECT box represents the user selection.

The below function can be called before a form is submitted and it will read all the options in a SELECT box and will append to the form as a multiple selection INPUT field. Thus, the server will be able to read the value as an array or options.

This example also gives you an idea how an INPUT array form element is created using Javascript.

The form could look like this.

<form action="move_select.html" method="get" onsubmit="return postSelect(this);">
  <select name="multipleValues[]" id="multipleValues" size="5" multiple>
    <option value="1">America</option>
    <option value="2">Canada</option>
    <option value="3">China</option>
    <option value="4">England</option>
  </select>
  <input name="Submit" type="submit" value="Submit" />
</form>

Here is the Javascript which will be called before the form is submitted. The id of the Multiple SELECT box is “multipleValues”. The script loops through the select box and appends it as an input array element to the FORM and submit the form to the server.

<script>
function postSelect(daForm) {
	var postAll;
	var sB = document.getElementById("multipleValues");
	for(var k=0; k<sB.length; k++){
		postAll = document.createElement("input");
		postAll.setAttribute("type", "hidden");
		postAll.setAttribute("name", "selectBoxData[]");
		postAll.setAttribute("value", sB[k].value);
		daForm.appendChild(postAll) ;
	}
	return false;
}
</script>

Now in your server script, you can access the options (unselected) in the SELECT box as an array.

The php code for accessing the above SELECT box values would be this. Here, you can access “selectBoxData” as an array.

print_r($_POST['selectBoxData']);

Leave a Reply

Page optimized by WP Minify WordPress Plugin