comment on

I have had success in the past with different uses of javascript from within a cgi script however this has stumped me. I am trying to create to list boxes with a button or link that will move the selection in one list box to the other. I have written the code in HTML and it works fine in both mozilla and IE. However when I write the exact same code in perl it doesn't work out. This is probably pretty easy for most of you but hopefully you can offer some help. First here is the HTML code that works

<html>
<head>
<title>TEST</title>
<SCRIPT language="Javascript" type="text/javascript">
    function moveOptions(from,to) {
        for (var i=0; i<from.options.length; i++) {
            var o = from.options[i];
            if (o.selected) {
                to.options[to.options.length] = new Option( o.text, o.
+value, false, false);
            }
        }
        
        for (var i=(from.options.length-1); i>=0; i--) {
            var o = from.options[i];
            if (o.selected) {
                from.options[i] = null;
            }
        }
        from.selectedIndex = -1;
        to.selectedIndex = -1;
    }
</SCRIPT>
</head>
<body>
<form name="form" action="">
    <table summary="">
        <tr>
            <td>
                <select name="available" multiple size="5">
                    <option value="1">Admin</option>
                    <option value="2">Test</option>
                    <option value="3">Clients</option>
                </select>
            </td>
            <td>
                <input class="accessButton" type="button" value=">>" o
+nClick="moveOptions(this.form.available, this.form.selected);"><br>
                <input class="accessButton" type="button" value="<<" o
+nClick="moveOptions(this.form.selected, this.form.available);">
            </td>
            <td>
                <select multiple name="selected" size="5"></select>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
[download]

Here is the perl code:

#!/usr/bin/perl
use strict;
use CGI qw/:standard/;

#Initiate Variables

#Create functions

#write HTML
print "Content-Type: text/html\n\n";
print "<html>\n";
print "<head>\n";
print "<title>TEST</title>\n";
print "<SCRIPT LANGUAGE=\"Javascript\" type=\"text/javascript\">
    function moveOptions(from,to) {
        for (var i=0; i<from.options.length; i++) {
            var o = from.options[i];
            (o.selected) {
                to.options[to.options.length] = new Option( o.text, o.
+value, false, false);
            }
        }
        for (var i=(from.options.length-1); i>=0; i--) {
            var o = from.options[i];
            if (o.selected) {
                from.options[i] = null;
            }
        }
        from.selectedIndex = -1;
        to.selectedIndex = -1;
    }
</SCRIPT>
";
print "</head>\n";
print "<body>\n";
print "<form name=\"form\" action=\"\">\n";
print "    <table summary=\"\">\n";
print "        <tr>\n";
print "            <td>\n";
print "                <select name=\"available\" multiple size=\"5\">
+\n";
print "                    <option value=\"1\">Admin</option>\n";
print "                    <option value=\"2\">Test</option>\n";
print "                    <option value=\"3\">Clients</option>\n";
print "                </select>\n";
print "            </td>\n";
print "            <td align=\"center\">\n";
#print "                <a href=\"javascript:moveOptions(document.add.
+available, document.add.selected);\">Add</a><br>\n";
#print "                <a href=\"javascript:moveOptions(document.add.
+selected, document.add.available);\">Remove</a>\n";
print "                <input class=\"accessButton\" type=\"button\" v
+alue=\"Add>>\" onClick=\"moveOptions(this.form.available, this.form.s
+elected;\"><br>\n";
print "                <input class=\"accessButton\" type=\"button\" v
+alue=\"<<Remove\" onClick=\"moveOptions(this.form.selected, this.form
+.available;\">\n";
print "            </td>\n";
print "            <td>\n";
print "                <select multiple name=\"selected\" size=\"5\"><
+/select>\n";
print "            </td>\n";
print "        </tr>\n";
print "    </table>\n";
print "</form>\n";
print "</body>\n";
print "</html>\n";
[download]

Any help is greatly appreciated and if you could include a small explanation of why this is happening so I can learn from my mistakes. Thanks

In reply to Perl CGI w/ Javascript by tertullian01

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		`&`
	<		`<`
	>		`>`
	[		`[`
	]		`]`

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.