Page 1 of 1
Saving 2 list boxes at the same time
Posted: Mon Jul 21, 2008 6:36 am
by eskio
I have the following code
Code: Select all
<html>
<head>
<title>Transfer List</title>
<script language="javascript">
function TransferList(l1,l2) {
if (l1.options.selectedIndex>=0) {
o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
l2.options[l2.options.length]=o;
l1.options[l1.options.selectedIndex]=null;
}else{
alert("Please select a course");
}
}
</script>
</head>
<body>
<?php
if (isset($_POST['Save'])){
// Place to save both listboxes
} // if (isset($_POST['Save']))
?>
<div align="center">
<form name="formulaire">
<TABLE>
<TR>
<TD align="center"><strong>Courses</strong><br />
<select name="CoursesList1" size=6 style="width:120px">
<option value="C++">C++</option>
<option value="VB6">VB6</option>
<option value="VB.NET">VB.NET</option>
<option value="C#">C#</option>
<option value="PHP">PHP</option>
<option value="Delphi">Delphi</option>
</select>
</TD>
<TD align="center">
<input type="button" value="Add >>>" onClick="TransferList(this.form.CoursesList1,this.form.CoursesList2)">
<br />
<br />
<input type="button" value="<<< Delete" onClick="TransferList(this.form.CoursesList2,this.form.CoursesList1)">
</TD>
<TD align="center"><strong>Courses</strong><br />
<select name="CoursesList2" size=6 style="width:120px">
</select>
</TD>
</TR>
</TABLE>
<input name="Save" type="submit" value="Save">
</form>
</div>
</body>
</html>
and I want to
save both lists at the same time.
It is easy to save a selected items (single or multiple) using PHP. In my case, I transfer one or more items from the first list to the second and save both lists (
that means items are not selected).
Thanks
Re: Saving 2 list boxes at the same time
Posted: Mon Jul 21, 2008 1:18 pm
by RobertGonzalez
Help me understand you a bit here... when you say save are you talking about writing to a DB/File?
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 12:37 am
by eskio
When I say 'Save', it means that I want to save to DB. But my real pbm is not writing into DB but reading the unselected items of the list boxes. Let me formulate my question in this way:
I want to display on the screen the content of both list boxes (using echo or print or print_r etc.).
Thanks
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 12:56 am
by Stryks
eskio wrote:In my case, I transfer one or more items from the first list to the second and save both lists
How do you do that? Javascript?
I guess another way to put it is, how is the first box populated? If the values are hard coded, I would just create an array of values on the display page to dynamically create the first select. Then when you submit the form, you will know which ones have been chosen to move to the second box and you will already have the master list. Subtract one from the other and you have the ones that weren't selected from the first select.
Then redisplay the form, with the selected items inserted into select 2, saving the complete list (probably into a session). Then when the user submits again, you have the full select 1 list, the full select 2 list, and the item chosen with select 2.
If with javascript, then ... I'm not sure. Populate the initial list with the array as per the above, but insert a hidden field for each select one item. When you copy the value across, set the hidden value to true. Then when the form submits, you will have the master list, values for items moved into select two, and the item selected with select two.
Then save whatever info you need to the database.
Is that what you're meaning?
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 2:23 am
by RobertGonzalez
Does the selection of the first select list drive the content of the other? Are you wanting to do this in stages (like user selects something from list a, submits, gets list a back but now has list b based on list a) or are you looking at list b populating when list a changes?
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 3:55 am
by eskio
The first list is populated from a DB. Then I select some items (first list or master list) and put (transfer) them to the 2nd list box. I can do it using javascript.
Stryks as I understand u, I have to submit my form twice to get the 2 lists?
In a simple way, how can I read the whole content of a list box (both selected and not selected) using PHP?
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 6:37 am
by Stryks
Doing it via PHP alone would require two form submits.
Javascript could do it in one using various methods. But as far as I am aware, PHP has no ability to return the non-selected items from a select box, only the selected ones.
The fact you load the first select from the db means you can pull that again to get a full initial list, and embedding either a serialized single hidden field or a hidden field per option moved across (populated by javascript when you move selected items from select 1 to select 2).
Then when the form is submitted, you have the master list you used to populate select 1, the hidden fields will tell you what select 2 was populated with, and you will have the selected options from select 2 in $_POST.
Or you could use the two separate PHP pages and use AJAX to make it appear as if there was a single submit.
But unless you already have ajax on your site, and assuming that you're opposed to the two submits, then the javascript method should give you what you need.
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 12:23 pm
by RobertGonzalez
Use the onChange event in Javascript. It is done all the time and there are no form submits. Just prepare a contingency for when JS is disabled.
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 8:06 pm
by Stryks
For whatever reason though, the OP needs to know what items are populated into (selected AND unselected) the second select. Either way that will require at least one submit ... the problem is how to tell PHP what was put into the second select.
That is why I suggested hidden form fields to hold the list contents, which would be submitted along with the form.
Unless I'm missing something.
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 8:30 pm
by RobertGonzalez
Javascript will not ever require a post to determine what is selected/checked/not empty. onChange, onClick, etc can listen and handle actions based on interaction from the user. Even when the page loads.
Re: Saving 2 list boxes at the same time
Posted: Tue Jul 22, 2008 8:37 pm
by Stryks
That's not exactly what I mean.
The javascript part will function fine without a post, without question. But as I understand the OP, this is not the problem.
What the OP seems to be asking for is a way to let PHP know what items javascript populated into the second select, regardless of if they are selected or not.
So, a user selects 3 items from select 1, javascript populates them into select 2. The user then selects a single item from select 2 and hits submit. How can he know what was populated into select 2, not just what was selected in select 2.
Without AJAX, I'm suggesting hidden field(s) that would get populated along with select 2, so that on submit, PHP would have access to a full list of select 2, along with the selected item being available in $_POST.
Make sense?
Re: Saving 2 list boxes at the same time
Posted: Wed Jul 23, 2008 8:36 am
by RobertGonzalez
Would you need the full list from select 2 to know what was posted?
Re: Saving 2 list boxes at the same time
Posted: Wed Jul 23, 2008 9:59 am
by Stryks
Well ... now that you put it that way, assuming that it was a one-time multi-select (meaning that whatever was selected in 1 was moved to 2 with each change, and deselecting from 1 removed it from 2) then no. I dont suppose you would. You should be able to collect that with the POST returns from select 1.
For some reason I was thinking more of a select from 1 -< move to 2, select from 1 -< move to 2 scenario.
Good point though.

Re: Saving 2 list boxes at the same time
Posted: Sat Jul 26, 2008 4:06 am
by eskio
Hi,
with your help, I have the solution:
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function TransferItem(l1,l2) {
if (l1.options.selectedIndex>=0) {
o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
l2.options[l2.options.length]=o;
l1.options[l1.options.selectedIndex]=null;
}else{
alert("Please select an item");
} // if (l1.options.selectedIndex>=0)
} // function Transfer(l1,l2)
function CopyToTextBox(l,t) {
//var l=f.cboGroup2;
var ordre="";
for(var i=0;i<l.options.length;i++) {
if (i>0) {ordre+="-";}
ordre+=l.options[i].value;
} // for(var i=0;i<l.options.length;i++)
t.value=ordre;
} // function CopyToTextBox(l,t)
</script>
</head>
<body>
<?php
if (isset($_POST['Submit'])){
print $_POST['txtOrderMaster'].'<br />'.$_POST['txtOrdre2'];
} // if (isset($_POST['Submit']))
?>
<form name="frmGrouping" method="post" action="">
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td width="200"><select name="cboGroup1" size="6" id="cboGroup1" >
<option value="1">Tony</option>
<option value="2">John</option>
<option value="3">Mike</option>
<option value="4">Abebe</option>
<option value="5">Tamerat</option>
<option value="6">Alexander</option>
<option value="7">Michael</option>
</select>
<input type="text" name="txtOrderMaster"></td>
<td width="100"><div align="center">
<p><input name="cmdAdd" type="button" id="cmdAdd" value=" >>> " onClick="TransferItem(this.form.cboGroup1,this.form.cboGroup2);CopyToTextBox(this.form.cboGroup2,this.form.txtOrdre2);CopyToTextBox(this.form.cboGroup1,this.form.txtOrderMaster);"></p>
<p>
<input name="cmdRemove" type="button" id="cmdRemove" value=" <<< " onClick="TransferItem(this.form.cboGroup2,this.form.cboGroup1);CopyToTextBox(this.form.cboGroup2,this.form.txtOrdre2);CopyToTextBox(this.form.cboGroup1,this.form.txtOrderMaster);">
</p>
</div></td>
<td><select name="cboGroup2" size="6" id="cboGroup2">
</select>
<input name="txtOrdre2" type="text" id="txtOrdre2"></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<input type="submit" name="Submit" value="Submit">
</div></td>
</tr>
</table>
</form>
</body>
</html>
I used 2 text boxes (txtOrderMaster, txtOrdre2) to save the content of lists.
Thanks for your help.
