Re: How to select many times from a drop down menu in the same form

That can be done using JavaScript.

To select multiple items from a drop-down list in the same form, you have to store the selected items in another list in the form (and provide a facility to delete item from that list). Upon submit, the items in that list need to be selected, otherwise they won't make it into the CGI params. Get a book covering JavaScript, or visit one of the zillion sites covering JavaScript, listboxes and shopping carts.

Anyways, here's how you can do that.

#!/usr/bin/perl
use CGI qw(:all);

my $js = <<EOH;
function addFromList() {
    var popup = document.getElementById('title');
    var olist = document.getElementById('ordered_items');
    for (var i = 0; i<popup.options.length;i++) {
        if(popup.options[i].selected) {
            var item = popup.options[i].value;
            // if you want to allow multiple instances
            // of the same item in your list, remove the
            // next three lines.
            for(var j = 0; j<olist.options.length; j++) {
                if (olist.options[j].value == item) return;
            } 
            var opt  = new Option(item,item,false,false);
            olist.options[olist.options.length] = opt;
        } 
    } 
} 
function addFromEntry () {
    var olist = document.getElementById('ordered_items');
    var entry = document.getElementById('requesttext');
    if(entry.value != '') {
        var opt = new Option(entry.value,entry.value, false,false);
        olist.options[olist.options.length] = opt;
    }
} 
function removeFromList () {
    var olist = document.getElementById('ordered_items');
    for (var i = olist.options.length - 1; i>=0; i--) {
        if (olist.options[i].selected) {
            olist.options[i] = null;
        } 
    } 
    olist.selectedIndex = -1;
} 
function selectAll() {
    var olist = document.getElementById('ordered_items');
    for (var i = 0; i<olist.options.length; i++) {
        olist.options[i].selected = true;
    } 
} 
EOH
print header(), start_html (-script => $js) ;

#=====================================================================
+==========
my @titlelist;
open FILE, "<$ENV{'DOCUMENT_ROOT'}/data/vault/titlelist.txt" or die $!
+;
     chomp (@titlelist = <FILE>);
close FILE;

print br() x 5;
print start_form( action=>'/cgi-bin/admin.pl' );
    print table( {class=>'user_form'},
        Tr( td( {width=>'55%'},  'Select items' ),
            td( {width=>'35%'},  popup_menu( -id=> 'title', -name=>'ti
+tle', -values=>\@titlelist )),
            td( {width=>'10%'},  button(-name => 'add', -value => "add
+", -onclick => 'addFromList()'))),
            
        Tr( td( 'ask for something else if it is not listed on drop do
+wn menu'  ),
            td( textfield( -name=>'requesttext',-id => 'requesttext' )
+),
            td( button(-name => 'request', -value => 'request', -oncli
+ck => 'addFromEntry()'))),

        Tr( td( 'Your Order list'),
            td( popup_menu(-name => 'ordered_items', -multiple => 1, -
+id => 'ordered_items')),
            td( button(-name => 'delete', -value => 'remove',-onclick 
+=> 'removeFromList()'))),

        Tr( td( 'Soemthing to remark on order' ),
            td( {colspan=>2},  textarea( -name=>'remark', -rows=>6, -c
+olumns=>35 ))),
     
        Tr( td(  a( {href=>'/cgi-bin/show.pl?name=showbook'}, font( {s
+ize=>3, color=>'yellow'}, 'Change Order' ))),
            td( {colspan=>2},  submit( -name => 'Order!', -onclick => 
+'selectAll()' )))
    );

      print hidden(-name=>'date',  -value=>$date);
      print hidden(-name=>'host',  -value=>$host);
print end_form();
print br() x 5;
#=====================================================================
+==========

if(param('ordered_items')) {
    print h3('Your Order'),ul(map{li($_)} param('ordered_items'));
} 
if(param('remark')) {
    print h3('Your remark'),param('remark');
} 
print end_html;
__END__
[download]

I would rather use the POST method with that form.

If you don't want to use JavaScript, you will have to use a list box with multiple select turned on (not a drop down); the third possibility is to have your users submit the form after each select, and store the selected items somewhere on the server side, e.g. in a CGI::Session object.

update: I see you've implemented this at your server... as easy as cut-n-paste, no? But come on. Read the code before you include it, and include only as much as makes sense:

You included the whole bunch from the line my $js = <<EOH; so you have the line

print header(), start_html (-script => $js) ;
[download]

in it. Which means

you are outputting the header twice
you have two <!DOCTYPE> declarations
you have a header and body section inside a body section

Also, you could set the ordered-items list box to some initial width (via css), the small thingy in there just looks funny :-)

--shmem

_($_=" "x(1<<5)."?\n".q·/)Oo.  G°\        /
                              /\_¯/(q    /
----------------------------  \__(m.====·.(_("always off the crowd"))."·
");sub _{s./.($e="'Itrs `mnsgdq Gdbj O`qkdq")=~y/"-y/#-z/;$e.e && print}

Comment on Re: How to select many times from a drop down menu in the same form Select or Download Code

Replies are listed 'Best First'.
Re^2: How to select many times from a drop down menu in the same form by Nik (Initiate) on May 06, 2007 at 10:19 UTC
Thanks a zillion shmem! This is EXACTLY what i wanted and thanks again for providing to me 3 different ways of approaching thsi problem I will prefer the javascript way although having user to submit the form could be used even more easily as well. In both ways the user will have to hit same buttons, yes? Add button woudl ahve been used as submit button and same thing the request button right?Myabe thsi way sould be even more easy? I wont prefer the scrolling list method though because my list then gest huge and messes up table columns. `print header( -charset=>'utf-8' ); print start_html( -script => my $js, -style=>'/data/css/style.css', -title=>'Order Project!' );` [download] Yes i did cut-n-paste firstly :-) cause iw as anxiosu to see if it works(it does!) but then i tried the baove code on the start of my page but in this way things dont get addeed in order list, which mean javascript aint workign properly but why? After all i do us ethe '-script'.	[reply] [d/l]
Re^3: How to select many times from a drop down menu in the same form by shmem (Chancellor) on May 06, 2007 at 10:26 UTC
`print header( -charset=>'utf-8' ); print start_html( -script => my $js, -style=>'/data/css/style.css', -title=>'Order Project!' );` [download] Wrong. You are setting up another lexical variable `$js` which is empty at this point. You want `my $js = <<EOH; // JavaScript here EOH print header( -charset=>'utf-8' ); print start_html( -script => $js, -style=>'/data/css/style.css', -title=>'Order Project!' );` [download] update: Try `td( popup_menu( -name => 'ordered_items', -multiple => 1, -id => 'ordered_items', -style => "width: 230px;" ) ),` [download] --shmem _($_=" "x(1<<5)."?\n".q·/)Oo. G°\ / /\_¯/(q / ---------------------------- \__(m.====·.(_("always off the crowd"))."· ");sub _{s./.($e="'Itrs `mnsgdq Gdbj O`qkdq")=~y/"-y/#-z/;$e.e && print}	[reply] [d/l] [select]