Home » CSS & XHTML, Javascript & Libraries » HTML Form – Moving options from one SELECT to another

9

This article basically talks about two things.

1) A Javascript code to move options from one multiple select box to another in a form.

Move options from one SELECT box to another:

There are two multiple SELECT boxes and one has got some OPTIONS in it. User can select one or more options from one and click on the Move button to transfer the selected options in to the other one. Similarly, the selected options from the second SELECT box can be moved back to the first one.

Here is the HTML Code:

<form action="" method="post">
  <table width="250" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100"><select name="SourceSelect[]" id="sourceSelect" size="5" multiple ondblclick="moveData(); return false;">
          <option value="1">America</option>
          <option value="2">Canada</option>
          <option value="3">China</option>
          <option value="4">England</option>
        </select></td>
      <td width="100" align="center" valign="middle"><input type="submit" name="forward" id="button" value=">>>>" onclick="moveData(); return false;"/>
        <input type="submit" name="back" id="button" value="<<<<" onclick="moveData('back'); return false;"/></td>
      <td align="left"><select name="DestinationSelect[]" id="destinationSelect" size="5" multiple="multiple" ondblclick="moveData('back'); return false;">
        </select></td>
    </tr>
  </table>
</form>

And here is the Javascript code:

<script type="text/javascript" language="javascript1.2">
function moveData(dir) {
	var sF = document.getElementById(((dir == "back")?"destinationSelect":"sourceSelect"));
	var dF = document.getElementById(((dir == "back")?"sourceSelect":"destinationSelect"));
	if(sF.length == 0 || sF.selectedIndex == -1) return;
	while (sF.selectedIndex != -1) {
		dF.options[dF.length] = new Option(sF.options[sF.selectedIndex].text, sF.options[sF.selectedIndex].value);
		sF.options[sF.selectedIndex] = null;
	}
}
</script>

The above code also allows you to double click on a select option to move it to the other.

9 Comments

  1. sonia says:

    nice…. its work fine… but how to insert the destinationselect value in to db

  2. sonia says:

    i have got it…

    • ezhar says:

      how to insert the destinationselect value in to db ?
      I have not found the answers to these questions,,
      pless help me,,

  3. yogesh says:

    thanks for this code.

  4. Hey Ask,
    This might be off topic, however, The basic input form for users to submit information such as text boxes, etc. serve their purpose well. But to make the web page more user-friendly and robust, there are other controls available for special purposes that you may want to use, like a drop-down list of possible choices, a checkbox, or a password field.
    Kindest Regards

  5. Ezhar says:

    nice…. its work fine… but how to insert the destinationselect value in to db ?
    thank’s,,

  6. Aneeska says:

    Read http://www.w3schools.com/php/php_mysql_insert.asp. See the section titled ‘Insert Data From a Form Into a Database’. In this case, you will have to add a Submit button and the form target to submit the form data to a server side script. And from server side script you can access the values of DestinationSelect.
    In PHP, you will receive the data as $_POST['DestinationSelect'] which would be an array of values. You can loop through this array and save it to the database.

    • Ezhar says:

      I have added the submit button into the script, and also I’ve added a script to retrieve the $ _POST DestinationSelect, but the result is the error message “Undefined index: DestinationSelect”, so how do I solve the problem?
      and whether existing data on DestinationSelect must first select the data?
      please help me,,
      thank you

  7. Rina says:

    how to send all the data on the DEstinationSelect without having to select the data first? can be said to exist in the data DestinationSelect is automatically selected..

Leave a Reply

Page optimized by WP Minify WordPress Plugin