Moving option elements between HTML select lists

Hey everyone thanks for reading this…

So I searched around sitepoint and couldnt find anything on this so I am posting a new thread. It is a very useful tool if I can get it to work correctly

http://www.tomred.net/index.php/JavaScript_Moving_option_elements_between_HTML_select_lists

This site shows the code to make two select list boxes and have add and remove buttons that will bounce options back and forth from them.

My question is how to use this in a form and read the values in the selected list on the next page that the form gets posted to. Simple enough right?

Here is the code for the lists on the form:

        <script>
function swapElement(fromList,toList){
	var selectOptions = document.getElementById(fromList);
	for (var i = 0; i < selectOptions.length; i++) {
		var opt = selectOptions[i];
		if (opt.selected) {
			document.getElementById(fromList).removeChild(opt);
			document.getElementById(toList).appendChild(opt);
			i--;
		}
	}
}
</script>
<div class="OneOfTwo" style="width:60%">
<div style="float:left;">
<strong>Select 1.</strong><br />
<select id="available" size="5" multiple="multiple" style="width: 170px;">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
</select>
</div>
<div style="float:left;height:50px;padding-top:30px;">
<input type="button" class="testButton" value="<" onclick="swapElement('selected','available')" /><br />
<input type="button" class="testButton" value=">" onclick="swapElement('available','selected')" style="padding-left:12px;" />
</div>
<div style="float:left;">
<strong>Select 2.</strong><br />
<select id="selected" size="5" multiple="multiple" style="width: 170px;">
</select>
</div>
</div>

What I need to know is how to read all the selected options. Do I need to add name tags to the select list and simply just grab the posted values for that name?

Depends what serverside language is being used to receive the form post.

I’ll guess php
http://www.php.net/manual/en/faq.html.php#faq.html.arrays

Ok I will do some testing and post results. I think this is useful to have in the sitepoint forums.

What I am worried about is that the Added list will needed to be highlighted in order to seem like it is in that select list (box). I will see what happens…

Ok here is the issue and what I was afraid of.

Here is my testform.php page code:

<script>
function swapElement(fromList,toList){
	var selectOptions = document.getElementById(fromList);
	for (var i = 0; i < selectOptions.length; i++) {
		var opt = selectOptions[i];
		if (opt.selected) {
			document.getElementById(fromList).removeChild(opt);
			document.getElementById(toList).appendChild(opt);
			i--;
		}
	}
}
</script>
<form action="testformscript.php" method="post"/>

<div style="float:left;">
<strong>Email Groups</strong><br />
<select id="available" size="8" multiple="multiple" style="width: 140px;">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
</select>
</div>
<div style="float:left;height:50px;padding-top:30px;">
<input type="button" class="testButton" value="   > Add   " onclick="swapElement('available','selected')" />
<br />
<input type="button" class="testButton" value="< Remove" onclick="swapElement('selected','available')" /><br />
</div>
<div style="float:left;">
<strong>Add To These Groups</strong><br />
<select id="selected" size="8" multiple="multiple" name="selected[]" style="width: 140px;">
</select>
</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

    <input type="submit" name="Submit" class="formbutton" id="Submit" value="Submit IS Request" />
    <br />
  </p>
  </form>

and my script to read what was selected
testformscript.php

<?php


	$test=$_POST['selected'];
	if ($test){
	 foreach ($test as $t){echo 'You selected ',$t,'<br />';}
	}




?>

Ok when items are moved to the second box named selected they need to be highlighted before the submit button is pressed to post them to the next page. But the user may only have certain values highlighted while moving items back and forth.

So I was thinking maybe when the submit button is pressed it can first call a javascript function that will highlight all options (values) in the “selected” list box before posting to the next page?

Do you think that would work? Any idea on how to start the code to do that?
Or is there a better option?

Thanks!

Sorry about answering my own question but atleast it is now documented for others…

I had the right idea to select all using javascript on the submit of the form.

<form action="testformscript.php" method="post"  onsubmit="selectAllOptions('selected');"/>

Add that to the form tag and then use the function

function selectAllOptions(selStr)
{
	var selObj = document.getElementById(selStr);
	for (var i=0; i<selObj.options.length; i++) {
		selObj.options[i].selected = true;
	}
}

Hope that helps someone in the future. It is a nice touch I think to a UI.

I got the help from: http://www.mredkj.com/tutorials/tutorial007.html?sel2Name=optBVal1&sel2Name=optBVal2&sel2Name=optBVal3&sel2Name=optAVal2