Pick and Choose List

swifttide

I am looking to see if PHP can do something like this:

You have two list boxes on a page. On the left are all the choices, the right box is empty. In the middle you have "arrow buttons". A single one pointing right says "move the selected choice into the right box". A single pointing left does the opposite. A double pointing right says "move all choices from left to right". A double pointing left does the opposite.

I am not sure if I can do this with PHP. Maybe Javascript? Or is it just impossible to do with web pages?

Thanks everyone.

Errant

Yes it is perfectly possible - you will need the list box on the right in one form (form1), and then just use a text box on the left in another form (form2). Then set the arrow up to submit form1 capturing the value and sending it too the same page - then use a script to capture the posted variable and display it in the text box (form2). You may also need to save the same info in a hidden field in form1 so the next time you update you can display all the previous selections. Then the user canm submit form2 when he has made the choices.

Fairly simple (if it makes sense). However the drawback is that it is clunky as the page needs submitting (and refreshing) each time a selection is made. A better way would be to use AJAX (involving Javascript) which would work in the same way but do it i the background allowing the user to make another selection while another is being processed. That would also allow you to have one form and negates the need for a hidden field etc.

It all depends on what you feel confident in doing!

saraadmin

This is a JavaScript job.

Both the W3C DOM and IE DOM provides functions to do this quite easily.

swifttide

Can anyone point me to a Javascript example that does this? And it needs to be "browser friendly", so if it's IE only, we can't use it.

Thanks!

Errant

Hmm well you couldn't do it with straight Javascript because I am pretty sure even the DOM cant grab the selection from a list box (never tried it tho tbh). Your best bet would be the AJAX / php solution - and I doubt you'll find an example of what you need on the web. I could work an example out tonight and post it for you tomorrow (cos I don't have a net connection where I am staying this week) if you like.

Unless someone knows how it can be done with Javascript!

swifttide

Errant, that would be cool, if you would please.

I'm sure we could work something out for your trouble!

Errant

Hey thats no problem! It might not work! LOL

Think of it as open source coding 😛 Might be nice to know what it was for tho!!!

saraadmin

I've done this before - as long as we're talking about the same thing. Two <select> elements and you want to move items from one to the other on a button click?

This code excerpt is lifted from an old project of mine and, if used as the event handler of the 'arrow' buttons, should achieve the desired effect. It requires that your <select> elements have id attributes.

In my code I included two versions of the function: moveItemFromListAtoListB and moveItemFromListBtoListA, swapping the source and dest lists in each one. You could also pass the two lists (or their ids) to a single function as parameters.

function moveItemFromListAtoListB()
{
  source = getElementById("[I]source_list's_id[/I]");
  dest = getElementById("[I]dest_list's_id[/I]");

  for (i = 0; i < source.options.length; i++)
  {
    o = source.options[i];
    if (o.selected)
    {
      dest.options[dest.options.length] = new Option(o.text, o.value, false, false);
      source.options[i] = null;
    }
  }
}

Let me know if it (still ;-) works!