arrays [] list box

donnierivera

Location:
Posts: 34
Javascript arrays []
I have researched my problem, but I am stuck on how to accomplish what I am trying to do. I have two list boxes. One of all none selected elements and one with current selected elements. I want to give the user the ability of adding and removing elements from the list boxes, however, I don’t want constant I/O for something that should be done on the client side. I found the JavaScript code that adds and removes elements from the different list boxes, but the way php pass multiple selections (i.e. addFacList[]) is giving me problems. I read that in order interact with arrays and JavaScript to do this:
variable = document.forms[0].elements[‘var[]’];
But not being that proficient with JavaScript could someone give me a hand with what I need to do and/or doing wrong… My code is as follows… Thanks for any help or suggestions....

function deleteOption(theSel, theIndex)
{
var selLength = theSel.length;
if(selLength>0)
{
theSel.options[theIndex] = null;
}
}

function moveOptions(theSelFrom, theSelTo)
{

var selLength = theSelFrom.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;

var i;

// Find the selected Options in reverse order
// and delete them from the 'from' Select.
for(i=selLength-1; i>=0; i--)
{
if(theSelFrom.options.selected)
{
selectedText[selectedCount] = theSelFrom.options.text;
selectedValues[selectedCount] = theSelFrom.options.value;
deleteOption(theSelFrom, i);
selectedCount++;
}
}

// Add the selected text/values in reverse order.
// This will add the Options to the 'to' Select
// in the same order as they were in the 'from' Select.
for(i=selectedCount-1; i>=0; i--)
{
addOption(theSelTo, selectedText, selectedValues);
}
}
//-->
</script>

print("<select name='removeFacList' size='10' multiple>");
$select ="SELECT ann_fac.fac_cd, fac_sdesc ";
$from ="FROM facility, ann_fac ";
$where ="WHERE ann_srl='$selected'";
$where .="AND ann_fac.fac_cd!=facility.fac_cd ";
$facQuery=$select.$from.$where;
$facilityData=db_query($facQuery);
while(list($fac_cd, $fac_sdesc)=db_fetch_row($facilityData)) {
print("<option value='$fac_cd'>$fac_sdesc</option>");
}
print("</select>");
print("<input type='button' value='--->' onClick='moveOptions(this.form.removeFacList, this.form.addFacList[]);' /><br><br />");
print("<input type='button' value='<---' src='images/remove.gif' onClick='moveOptions(this.form.addFacList[], this.form.removeFacList);' />");
print("<select name='addFacList[]' size='10' multiple>");
$select ="SELECT ann_fac.fac_cd, fac_sdesc ";
$from ="FROM facility, ann_fac ";
$where ="WHERE ann_srl='$selected'";
$where .="AND ann_fac.fac_cd=facility.fac_cd ";
$facQuery=$select.$from.$where;
$facilityData=db_query($facQuery);
while(list($fac_cd, $fac_sdesc)=db_fetch_row($facilityData)) {
print("<option value='$fac_cd'>$fac_sdesc</option>");
}
print("</select>");

Weedpacket

I think what you'll be needing to do is have the Javascript maintain an array of what items have been selected and in which order.

When the submit button is hit, it bundles the array's contents into a single string (separated by '+' say, or some other character that doesn't otherwise appear in the options), and puts that in a hidden variable which is submitted with the rest of the form.

The dropdown lists the users are using are then just for their benefit; their values are not needed because the information actually being sent is in that hidden field, as a '+'-separated string that PHP can then do a explode('+',$hiddenfield) and get back all the selected items in the order that the user put them in. Oops. Sorry for the run-on sentence. :o

This is because there really is no guarantee in the CGI spec that form fields will arrive in any particular order.

tuurlijk

Hey donnierivera,

I have just cracked the exact same problem, moving things from one list to another and having the contents of the dynamic listbox sent to a varname[] as an array.

Weedpacket's solution is too complicated.

Tuurlijk!'s solution:
- give the two lists normal names (not containing [])
- use one function for moving the options, like:

//------------------------------------------------------------------------------
//	move options form from_list to to_list
//------------------------------------------------------------------------------
function moveSelectedOptions (from, to) {
	// Move them over
	for (var i=0; i < from.options.length; i++) {
		var o = from.options[i];
		if (o.selected) {
			to.options[to.options.length] = new Option( o.text, o.value, false, false);
		}
	}
	// Delete them from original
	for (var i=(from.options.length-1); i >= 0; i--) {
		var o = from.options[i];
		if (o.selected) {
			from.options[i] = null;
		}
	}
	if ((arguments.length < 3) || (arguments[2]==true)) {
		sortSelect(from);
		sortSelect(to);
	}
	from.selectedIndex = -1;
	to.selectedIndex = -1;
} // end fun moveSelectedOptions

on submitting the form, select all the options in the desired list (selectAllOptions(plaatsnamen); )

//------------------------------------------------------------------------------
//	select all fields of optionlist named 'field'
//------------------------------------------------------------------------------
function selectAllOptions(field) {
	for (var i=0; i < field.options.length; i++)
		field.options[i].selected = true;
} // end fun selectAllOptions

and (also on submit, but after selectAllOptions) rename the option list whose values you want to pass (changeName(plaatsnamen, 'plaatsnamen[]'); )

//------------------------------------------------------------------------------
//	change name from item
//------------------------------------------------------------------------------
function changeName (element, to) {
	element.name = to;
	return true;
} // end fun changeName

<input class="button" type="button" value=" toon aanbod "
onClick="selectAllOptions(plaatsnamen); changeName(plaatsnamen, 'plaatsnamen[]'); this.form.submit();">

And you're done!
🙂

Kind regards,

Tuurlijk!