• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 312
  • Last Modified:

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
0
kdeutsch
Asked:
kdeutsch
1 Solution
 
HonorGodCommented:
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
 
magedroshdyCommented:
check attached file
option.htm
0
 
kdeutschAuthor Commented:
Sorry forgot to accept this
0
 
magedroshdyCommented:
not worries, Thanks for the points
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now