sorting lists in forms

Deansatch · #1 (**permalink**) 09-28-06, 11:43 AM

I have a list (array) which I would like to make sortable by a user then submitted so that it updates the order in the database. I don't want to use sciptaculous or anything of that sort because I have no knowledge of java.
All I want is some simple way of being able to rearrange the order of my list and then submit it. Preferably not a text box next to each item with a number in it.

Ideally, I would like it looking something like this:

item 1 "move up" "move down"
item 2 "move up" "move down"
item 3 "move up" "move down"

I have posted a simial message before but didn't really get any further. Trying again.

mab · #2 (**permalink**) 09-28-06, 02:28 PM

The short answer is that there is no simple way to do this. There is not an instruction or a few lines of code that will do this. If there was, you would have found it or someone would have come up with a simple solution to your previous post.

To get the items to move up/down on a page without refreshing the page on each click, it is necessary to use javascript. Here is a link I found that has a move up/down function for the items in the right side menu. http://www.hotscripts.com/Detailed/25015.html You could use a portion of this code to accomplish your form.

This code also maintains the order when you select, so you could also use this by listing the existing order on the left side and select items in the order you want them to appear in on the right side.

This code submits the form to a cgi script but it should be easy to process this in PHP instead. The order in which the data is submitted would need to be used to modify or replace the existing order.

Edit: I played with the code at that link and it does not directly form an array of values, so it would need some small modification to send an array to PHP...

mab · #3 (**permalink**) 09-29-06, 06:14 PM

I have found some code similar to the link I posted above, but which appears to be more general purpose and worked with little modification for the array[] variables that PHP expects - http://www.mattkruse.com/javascript/selectbox/

Coding for creating and filling in the original list from your data and saving the new data is up you.

Here is sample code that I tested with -

Code:

<HTML>
<HEAD>
	<TITLE>JavaScript move up/down example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="selectbox.js"></SCRIPT>
</HEAD>
<BODY>
<B><U>Moving Options up and down</U></B><BR>
<form action="formaction.php" method="post">
<TABLE BORDER="0">
<TR>
	<TD>
	<SELECT NAME="updownlist[]" SIZE="12" MULTIPLE>
		<OPTION VALUE="Option 1"> Option 1
		<OPTION VALUE="Option 2"> Option 2
		<OPTION VALUE="Option 3"> Option 3
		<OPTION VALUE="Option 4"> Option 4
		<OPTION VALUE="Option 5"> Option 5
		<OPTION VALUE="Option 6"> Option 6
		<OPTION VALUE="Option 7"> Option 7
		<OPTION VALUE="Option 8"> Option 8
		<OPTION VALUE="Option 9"> Option 9
		<OPTION VALUE="Option 10"> Option 10
		<OPTION VALUE="Option 11"> Option 11
		<OPTION VALUE="Option 12"> Option 12
	</SELECT>
	</TD>
	<TD ALIGN="CENTER" VALIGN="MIDDLE">
	<INPUT TYPE="button" VALUE="&nbsp;Up&nbsp;" onClick="moveOptionUp(this.form['updownlist[]'])">
	<BR><BR>
	<INPUT TYPE="button" VALUE="Down" onClick="moveOptionDown(this.form['updownlist[]'])">
	</TD>
</TR>
</TABLE>
    <input type="submit" name="Submit" value="Submit" onclick = "SelectAll(this.form.elements['updownlist[]'])"/>
</form>

</BODY>
</HTML>

This results in something like this in formaction.php file -

Code:

Using a foreach loop to display the POST data -
Key: updownlist[0], Value: Option 4
Key: updownlist[1], Value: Option 3
Key: updownlist[2], Value: Option 2
Key: updownlist[3], Value: Option 1
Key: updownlist[4], Value: Option 5
Key: updownlist[5], Value: Option 7
Key: updownlist[6], Value: Option 6
Key: updownlist[7], Value: Option 8
Key: updownlist[8], Value: Option 12
Key: updownlist[9], Value: Option 11
Key: updownlist[10], Value: Option 10
Key: updownlist[11], Value: Option 9

This is the additional SelectAll() function that needs to be added to the selectbox.js file -

Code:

function SelectAll(selectbox)
{
   var len = selectbox.options.length;
   var i;
   for(i = 0; i < len; i++)
   {
      selectbox.options[i].selected = true;
   }
   return true;
}

job0107 · #4 (**permalink**) 03-07-07, 09:12 PM

Here is a perfect tutorial that exploits javascripts drag and drop capabilities within a <select> box or between two or more <select> boxes.

How to Drag and Drop in JavaScript
http://www.webreference.com/programm...mn2/index.html