asked on

move items between listboxes with javascript

Wondering if anyone has some knowledge to switch items bewteen listboxes using javascript so they do not have to do postbacks for the code. her eis a smaple of what would be transfered between the 2. When Items hit listbox 2 this is when they get saved if they press submit but they want ot be able to move items between the 2 listboxes until they get it correct and then save all itmes to the db, instead of constanly having to postback moving items between the 2. Still working in Asp.net 1.1.
ID UIC
38 PUFAA
50 PUNNA

HonorGod

Something like this perhaps?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> From To </title>
<script type='text/javascript'>
  function moveit( id1, id2 ) {
    var sel1 = document.getElementById( id1 )
    var sel2 = document.getElementById( id2 )
    if ( sel1 && sel2 ) {
      var L1 = sel1.options.length
      var L2 = sel2.options.length
      for ( var si = L1 - 1; ( ( si > -1 ) && ( !sel1.options[ si ].selected ) ); si-- ) {
      }
      alert( 'si = ' + si )
      var text = []
      var val  = []
      for ( var i = j = 0; i < L1; i++ ) {
        if ( i != si ) {
          text[ j ] = sel1.options[ i ].text
          val[ j++ ]  = sel1.options[ i ].value
        }
      }
      sel2.options[ L2 ] = new Option( sel1.options[ si ].text, sel1.options[ si ].value )
      sel1.options.length = 0
      for ( i = 0; i < text.length; i++ ) {
        sel1.options[ i ] = new Option( text[ i ], val[ i ] )
      }
    } else {
      alert( 'error: missing id, either id="' + id1 + '" or id="' + id2 + '"' )
    }
  }
</script>
</head>
<body>
  <table border='1'>
    <tr>
      <th>Here</th>
      <th>There</th>
    </tr>
    <tr>
      <td>
        <select id='here' onchange='moveit("here","there")'>
          <option value='0'>Pick 1</option>
          <option value='1'>Uno</option>
          <option value='2'>Dos</option>
          <option value='3'>Tres</option>
        </select>
      </td>
      <td>
        <select id='there' onchange='moveit("there","here")'>
          <option value='0'>...</option>
        </select>
      </td>
    </tr>
  </table>
</body>
</html>

Open in new window

DooDah

Hello kdeutsch

Here's what you are looking for WITH VALIDATION using an EMAIL Form's Country Select as an example...

If your Form's name is "Email"
IF your select object name is "country"

PUT THIS Javascript FUNCTION in you HEAD
========================================

<script language="javascript">
function makeChoice() {
var thevalue = document.Email.country.selectedIndex;
document.Email.R_Country.value=document.Email.country.value;

      if (thevalue == 0) {
            document.Email.country.focus();
            alert("Please select your country.");
            return false;
      } else {
            return true;
      }
}
</script>

If your Form's name is "EmailEmail"
IF your select object name is "country"

ADD ONCHANGE to your SELECT BOX HTML
====================================
name="country" onchange="makeChoice()"

You will need a second HIDDEN field in your form to store the "currently" selected value
==================================================================================
document.Email.R_Country.value

ASKER CERTIFIED SOLUTION

magedroshdy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kdeutsch

ASKER

Sorry forgot to accept this

magedroshdy

not worries, Thanks for the points