waswas-fng has asked for the wisdom of the Perl Monks concerning the following question:

Hi all, I am running into a problem here and I think there must be a better way to do this. I have two scrolling_list objects that are printed from a CGI script. On the same page I also dump out some javascript that allows moving of one (or more than one) item from the scrolling_list to the other list and vv. I also have a submit button. when the form gets submitted back to the perl script it seems as though CGI.pm only shows items that were selected (highlighted) durring the submission -- not the list of items currently in the scrolling_list. I have read CGI.pm (see my head spinning lol) and I cant figure out if it is scoping the entire list out of the submit or if the lists dont get sent durring a submit. At this point I am thinking of creating an -onSubmit JS function to push the current items in the two select lists to a hidden var before submit. Is there an easier way to do this? here is some example code (not real code from my app cause it is too clunky..


use CGI;
$query = new CGI;
print $query->header;
print <<EOF ;
<SCRIPT LANGUAGE="JavaScript">
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for (i = 0; i < tbox.options.length; i++) {
arrLookup[tbox.options[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].text;
fLength++;
   }
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
   }
}
//  End -->
</script>

EOF

print $query->start_html(-title=>'la...', -BGCOLOR=>'#9FBBC5');
print $query->Dump;

    print $query->startform;
    print $query->scrolling_list(-name=>'list1',
                                -values=>\%btsntoln,
                            -size=>10,
                            -multiple=>'true');
print <<EOF ;
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.list2,this.form.list1)" v
+alue="<<">
<input type="button" onClick="move(this.form.list1,this.form.list2)" v
+alue=">>">
EOF
    print $query->scrolling_list(-name=>'list2',
                            -size=>10,
                            -multiple=>'true');
     print $query->submit('action','Update');
    print "</FONT>",$query->endform;
    print $query->end_html;

[download]

If you know of any way to do what I am trying to do please give me some pointers.

Thanks!
Waswas

Replies are listed 'Best First'.
Re: Multiple item selects and CGI.pm headaches!
by LTjake (Prior) on Oct 16, 2002 at 00:54 UTC
    The onsubmit option is the way to go:

    -- test.tmpl -- 
    <html>
<head>
<title>Test Page</title>
<script language="javascript">
<!--
function move_opt(source, destination) {
    for(var i = source.length - 1; i >= 0; i--) {
        if (source.options[i].selected) {
            destination.options[destination.length] = new Option(sourc
+e.options[i].text, source.options[i].value);
            source.options[i] = null;
        }
    }
}
// -->
</script>
<body>
<form action="test.cgi" method="get" onsubmit="for(var i = 0; i < docu
+ment.forms[0].box2.length; i++){document.forms[0].box2.options[i].sel
+ected = 'selected'}">
    <table>
    <tr>
        <td>
        <select name="box1" size="5" multiple="multiple">
        <!-- TMPL_LOOP NAME="list" -->
            <option value="<!-- TMPL_VAR NAME="value" -->"><!-- TMPL_V
+AR NAME="text" --></option>
        <!-- /TMPL_LOOP -->
        </select>
        </td>
        <td>
        <input type="button" value="->" onclick="move_opt(document.for
+ms[0].box1, document.forms[0].box2);"><br /><br />
        <input type="button" value="<-" onclick="move_opt(document.for
+ms[0].box2, document.forms[0].box1);">
        </td>
        <td>
        <select name="box2" size="5" multiple="multiple">
        </select>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center"><input type="submit" value="sub
+mit"></td>
    </tr>
    </table>
</form>
</body>
</html>

    [download]
    -- show_test.cgi -- 
    #!/usr/bin/perl -w

use CGI;
use HTML::Template;
use strict;

my @ref = (
    {
        value => '1', text  => 'a',
        },
    {
        value => '2', text  => 'b',
        },
    {
        value => '3', text  => 'c',
        },
    {
        value => '4', text  => 'd',
        },
    {
        value => '5',text  => 'e',
        },
);  

my $q = new CGI;

print $q->header;
my $template = HTML::Template->new(filename => 'test.tmpl');
$template->param(list => \@ref);
print $template->output;

    [download]
    -- test.cgi -- 
    #!/usr/bin/perl -w

use CGI;
use strict;

my $q = new CGI;

print $q->header;
print "$_<br>" foreach $q->param('box2');

    [download]
    I used method="GET" just to show the selected info in the URL.

    --
    Rock is dead. Long live paper and scissors!
[reply]
[d/l]
[select]
Re: Multiple item selects and CGI.pm headaches!
by chip (Curate) on Oct 15, 2002 at 23:06 UTC
    AFAIK, form submission only sends selected list items. You should go to plan B, the onSubmit javascript.

        -- Chip Salzenberg, Free-Floating Agent of Chaos

[reply]
A reply falls below the community's threshold of quality. You may see it by logging in.

Back to Seekers of Perl Wisdom