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
kdeutschAsked:
Who is Participating?
 
magedroshdyCommented:
check attached file
option.htm
0
 
HonorGodSoftware EngineerCommented:
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

0
 
DooDahCommented:

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

0
 
kdeutschAuthor Commented:
Sorry forgot to accept this
0
 
magedroshdyCommented:
not worries, Thanks for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.