Cut & Paste Auto tab (form field) script

Home / Free JavaScripts / Forms / Here

Cut & Paste PickList script

Credit: Sean Geraty

Description: PickList creates two form selection fields, and allows the user to easily transfer items from one field to another via "back" and "forth" buttons. Copy multiple selections at once by holding down the Ctrl button. Cool.

Example:

Directions

Step 1: Insert the below script into the <HEAD> section of your page:

<script LANGUAGE="JavaScript">  </SCRIPT>

Step 2: Then, add the below form into your page:

<form NAME="theform" ID="theform" ACTION="whatever" onSubmit="return selIt();"> <table> <tr> <td> <select NAME="SelectList" ID="SelectList" SIZE="5" multiple="multiple" style="width: 150px"> <option VALUE="01sel">Selection 01</option> <option VALUE="02sel">Selection 02</option> <option VALUE="03sel">Selection 03</option> <option VALUE="04sel">Selection 04</option> <option VALUE="05sel">Selection 05</option> <option VALUE="06sel">Selection 06</option> <option VALUE="07sel">Selection 07</option> <option VALUE="08sel">Selection 08</option> <option VALUE="09sel">Selection 09</option> <option VALUE="10sel">Selection 10</option> </select> </td> <td> <input TYPE="BUTTON" VALUE="->" ONCLICK="addIt();"></input> <br /> <input TYPE="BUTTON" VALUE="<-" ONCLICK="delIt();"></input> </td> <td> <select NAME="PickList" ID="PickList" SIZE="5" multiple="multiple" style="width: 150px"> <option VALUE="01sel">Selection 01</option> </select> </td> </tr> <tr> <td ALIGN="left"> <input TYPE="reset" VALUE="Reset" ONCLICK="javascript: window.location.href = 'picklist.html'"> </td> <td> </td> <td ALIGN="right"> <input TYPE="submit" VALUE="Submit"> </td> </tr> </table> </form>

Step 3: Finally, the script needs to be initialized when the page has loaded. Add the onLoad event handler into your <BODY> tag, as shown:

<body onLoad="initIt();">

Copyright © 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.