comment on

Dear Fellow Monks,
I want to include a Javascript in my CGI.pm Perl script. Why is this script not working? Especially the checkbox under generate_form() doesn't seem to recognize the JavaScript.

What the Javascript does is simply: when we check "2 Fastest" the other entries: "MITRA, SPACE, MEME" should be disabled. Similarly vice-versa when we check either one of the three, "2 Fastest" must be disabled.

#!/usr/bin/perl -w
use strict; 
use diagnostics;
use Data::Dumper;

use CGI qw/:standard :html3/; 
use CGI::Carp qw( fatalsToBrowser );

my $JSCRIPT=<<EOF;
var twofastest;
var checkboxes=[];

function initVars(){
    if ( twofastest )
        return;

    twofastest = document.getElementById('2 Fastest');

    var cb = document.getElementsByName('progname');
    var b = 0;
    for (var a=0; a<cb.length; a++ ){
        if ( cb[a] != twofastest ){
            checkboxes[b] = cb[a];
            b++;
        }
    }

}

function checkBoxClick(){
    initVars();
    var anyboxchecked = false;
    for (var a=0; a<checkboxes.length; a++ ){
        if ( checkboxes[a].checked )
            anyboxchecked = true;
    }

    twofastest.disabled = anyboxchecked;
}


function twofastestClick(){
    initVars();
    for (var a=0; a<checkboxes.length; a++ ){
            if ( twofastest.checked )
                checkboxes[a].checked = false;
            checkboxes[a].disabled = twofastest.checked;
    }
}



EOF

;

print header,
    start_html(
        -title => "Some Title",
        -script=> $JSCRIPT
    );

# some portions of code

sub generate_form {

    print start_multipart_form(),

        strong('Basic Programs To Choose: '), br
        checkbox_group(
        -name   => 'progname',
        -values => [
            '2 Fastest',
            'MEME',
            'MITRA',
            'SPACE',
            ],
        -rows => '2',
        -columns => '6',
        -defaults => [ '2 Fastest' ],

        # modified as advised by ikegami, 
        # but still not functioning
        -onClick=>"checkBoxClick()",  
        ),
        p,
}

# the rest of codes
[download]

I have a perfectly functioning stand alone html page with that Javascript in it. The content of that html is this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/
+/www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title></title>
  <meta name="GENERATOR" content="VIM">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript">
var twofastest;
var checkboxes=[];

function initVars(){
    if ( twofastest )
        return;

    twofastest = document.getElementById('twofastest');

    var cb = document.getElementsByName('progname');
    var b = 0;
    for (var a=0; a<cb.length; a++ ){
        if ( cb[a] != twofastest ){
            checkboxes[b] = cb[a];
            b++;
        }
    }

}

function checkBoxClick(){
    initVars();
    var anyboxchecked = false;
    for (var a=0; a<checkboxes.length; a++ ){
        if ( checkboxes[a].checked )
            anyboxchecked = true;
    }

    twofastest.disabled = anyboxchecked;
}


function twofastestClick(){
    initVars();
    for (var a=0; a<checkboxes.length; a++ ){
            if ( twofastest.checked )
                checkboxes[a].checked = false;
            checkboxes[a].disabled = twofastest.checked;
    }
}

</script>
</head>
<body>
<form action="">

    <input type="checkbox" name="progname" value="2fastest" id="twofas
+test"
        onClick="twofastestClick()">2 Fastest<br/>
    <input type="checkbox" name="progname" value="mitra"
        onClick="checkBoxClick()" />MITRA <br/>
    <input type="checkbox" name="progname" value="space"
        onClick="checkBoxClick()" />SPACE <br/>
    <input type="checkbox" name="progname" value="meme"
        onClick="checkBoxClick()" />MEME <br/>
</form>


</body>
</html>
[download]

Update: "checBoxClick()" modified to "checkBoxClick()" as advised by ikegami, but still not functioning.

Regards,
Edward

In reply to Howto Include JavaScript to CGI.pm Script by monkfan

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.