Saving 2 list boxes at the same time

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
eskio
Forum Commoner
Posts: 66
Joined: Tue Apr 01, 2008 1:00 am

Saving 2 list boxes at the same time

Post 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). :crazy:

Thanks
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Saving 2 list boxes at the same time

Post by RobertGonzalez »

Help me understand you a bit here... when you say save are you talking about writing to a DB/File?
eskio
Forum Commoner
Posts: 66
Joined: Tue Apr 01, 2008 1:00 am

Re: Saving 2 list boxes at the same time

Post 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
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Re: Saving 2 list boxes at the same time

Post 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?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Saving 2 list boxes at the same time

Post 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?
eskio
Forum Commoner
Posts: 66
Joined: Tue Apr 01, 2008 1:00 am

Re: Saving 2 list boxes at the same time

Post 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?
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Re: Saving 2 list boxes at the same time

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Saving 2 list boxes at the same time

Post 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.
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Re: Saving 2 list boxes at the same time

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Saving 2 list boxes at the same time

Post 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.
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Re: Saving 2 list boxes at the same time

Post 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?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Saving 2 list boxes at the same time

Post by RobertGonzalez »

Would you need the full list from select 2 to know what was posted?
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Re: Saving 2 list boxes at the same time

Post 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. :D
eskio
Forum Commoner
Posts: 66
Joined: Tue Apr 01, 2008 1:00 am

Re: Saving 2 list boxes at the same time

Post 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. :D
Post Reply