HTML/JavaScript - Submit all select list options

Whether selected or not, use JavaScript to submit all the values in a select list.

Tutorial007 - Try It

Move options back and forth, and click one of the submit buttons below to submit a query string to this same page. The options will be displayed in the submitted output right below. Also refer to my PHP example further below.

Hidden field


Auto-select

Submitted output gathered from window.location.search

 

Overview

When submitting a form, select lists will only submit the selected options to the server, so unless the user manually selects all the options before submitting, client side scripting needs to be used so all the options are submitted. The example above uses two different techniques, so it's up to you which version you want to try.

Hidden field technique

All the option values are set into one hidden field, separated by a specified delimiter

Auto-select all options technique

Use JavaScript to select all the options right before the form is submitted

Source

Public Domain

The tutorial007 JavaScript listed below is released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

JavaScript

// mredkj.com tutorial007
// 2 techniques for submitting all options
// You only need to pick one of the techniques
//
// 2005-08-30 - created
// 2006-05-27 - updated
//
// setSubmitDebugOuput is only used in the client-side example
window.onload = setSubmitDebugOuput;
function setSubmitDebugOuput()
{
  document.getElementById('divOutput').innerHTML = window.location.search;
}
// Technique 1
function placeInHidden(delim, selStr, hidStr)
{
  var selObj = document.getElementById(selStr);
  var hideObj = document.getElementById(hidStr);
  hideObj.value = '';
  for (var i=0; i<selObj.options.length; i++) {
    hideObj.value = hideObj.value ==
      '' ? selObj.options[i].value : hideObj.value + delim + selObj.options[i].value;
  }
}
// Technique 2
function selectAllOptions(selStr)
{
  var selObj = document.getElementById(selStr);
  for (var i=0; i<selObj.options.length; i++) {
    selObj.options[i].selected = true;
  }
}

HTML

For either technique you decide to use, you should set the form's onsubmit event handler.

Hidden field
<form action="tutorial007.html" method="get" onsubmit="placeInHidden('.', 'sel1', 'hide1');">
Auto-select
<form action="tutorial007.html" method="get" onsubmit="selectAllOptions('sel2');">

For the full HTML, use your browser's View Source to look at the underlying HTML.

Other JavaScript

The option move code is available in tutorial_mixed2b.html

Server side

The Try It at the top of this page is a client-side example, but you can also use the same javascript if you plan on submitting server-side.

Same goes for the HTML. You shouldn't have to change much except the action to point to your server-side page, and you'll probably want to change method="GET" to method="POST"

Many languages such as ASP don't have any special requirements in the naming conventions of the HTML fields, but some languages such as PHP do.

PHP

When submitting a multiple select list to PHP, you need to name the select with brackets [] at the end. For example, if you normally have name="mySel" that would need to be name="mySel[]"

In my JavaScript, I get around the inevitable problems in referencing that name by simply referencing the select's id instead.

Note that when using the hidden field technique, the select doesn't need a name, and the brackets should not be included in the name of the hidden field. The value of the hidden field is a string, not an array.

In the following examples, the options are submitted to a PHP page at another one of my sites - innovationlost.org.

Hidden field


Auto-select

JavaScript

The same javascript is used in these examples as in the example at the top of this page. Refer to the JavaScript above. You can ignore function setSubmitDebugOuput, because it's just for the client-side example.

HTML

As in the above client-side example, set the form's onsubmit event handler for the technique you decide to use.

Hidden field
<form action="http://innovationlost.org/mredkj/tutorial007.php"
 method="post" onsubmit="placeInHidden('.', 'sel3', 'hide2');">
Auto-select
<form action="http://innovationlost.org/mredkj/tutorial007.php"
 method="post" onsubmit="selectAllOptions('sel4');">

For the full HTML, use your browser's View Source to look at the underlying HTML.

About this page: