monkfan has asked for the wisdom of the Perl Monks concerning the following question:

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

Replies are listed 'Best First'.
Re: Howto Include JavaScript to CGI.pm Script
by ikegami (Patriarch) on Aug 28, 2007 at 03:09 UTC

    Reguarding your update, I opened the "Error Console" in the "Tools" menu in Firefox and it showed the following error: 

    Error: twofastest has no properties
Source File: http://defiant.i2r.a-star.edu.sg/~ewijaya/MotifVoter/cgi-
+bin/mv_dispatch_js.cgi
Line: 37

    [download]

    Looks like variable twofastest doesn't contain what it should. With simple backtracking, we see that
    variable twofastest is null, because
    document.getElementById('2 Fastest'); returns null, because
    there is no element with id 2 Fastest.

    USE THE ERROR CONSOLE!

[reply]
[d/l]
[select]
Re: Howto Include JavaScript to CGI.pm Script
by ikegami (Patriarch) on Aug 28, 2007 at 02:25 UTC

    I opened the "Error Console" in the "Tools" menu in Firefox and it showed the following error: 

    Error: checBoxClick is not defined
Source File: http://defiant.i2r.a-star.edu.sg/~ewijaya/MotifVoter/cgi-
+bin/mv_dispatch_js.cgi
Line: 1

    [download]

    Guess what, you simply mistyped the function name :) 

    -onClick=>"checBoxClick()",

    [download]

    should be 

    -onClick=>"checkBoxClick()",

    [download]
[reply]
[d/l]
[select]
Re: Howto Include JavaScript to CGI.pm Script
by atemon (Chaplain) on Aug 28, 2007 at 03:47 UTC

    The function call document.getElementById('2 Fastest'); returns null, since you are NOT printing any IDs for check boxes. To print Ids, you can use the 'attributes' option of 'checkbox_group' in CGI. The code with ids will look like : 

    sub generate_form {

    print start_multipart_form(),
        #strong('Your email: '),
        #textfield( -name => 'user_email' ), br, br


        strong('Basic Programs To Choose: '), br
        checkbox_group(
        -name   => 'progname',
        -values => [
            '2 Fastest',
            'MEME',
            'MITRA',
            'SPACE',
            ],
        -attributes=>{'2 Fastest'=>{'id'=>'2 Fastest'}}, #the extra li
+ne added to print id
        -rows => '2',
        -columns => '6',
        -defaults => [ '2 Fastest' ],
        -onClick=>"checkBoxClick()",  #modified as advised by ikegami,
+ but still not functioning
        ),
        p,
}

    [download]
    Hope this will help.

    Cheers !

    --VC


    There are three sides to any argument.....
    your side, my side and the right side.

[reply]
[d/l]
[select]
Re: Howto Include JavaScript to CGI.pm Script
by misc (Friar) on Aug 28, 2007 at 10:09 UTC
    Hello again,
    you also didn't set the onClick attribute of '2 Fastest'.
    I've modified the javascript slightly since you checked 2 Fastest by default. Clicking on any other checkbox will uncheck 2 Fastest now.

    Depending on what you are going to do I'd possibly like to recommend some templating system like e.g. HTML::Template

    For debugging javascript I use firebug with firefox. www.getfirebug.com

    Greetings, michael
    #!/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;
    }
    if ( anyboxchecked )
            twofastest.checked = false;

    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('Your email: '),
        #textfield( -name => 'user_email' ), br, br


        strong('Basic Programs To Choose: '), br
        checkbox_group(
        -name   => 'progname',
        -values => [
            '2 Fastest',
            'MEME',
            'MITRA',
            'SPACE',
            ],
        -attributes=>{'2 Fastest'=>{'id'=>'2 Fastest', 'onClick'=>'two
+fastestClick()'},
                        MEME=>{onClick=>'checkBoxClick()' },
                        MITRA=>{onClick=>'checkBoxClick()' },
                        SPACE=>{onClick=>'checkBoxClick()' }
                }, #the extra line added to print id
        -rows => '2',
        -columns => '6',
        -defaults => [ '2 Fastest' ],
        ),
        p,
}



generate_form();

print end_html();

    [download]
[reply]
[d/l]
Re: Howto Include JavaScript to CGI.pm Script
by ph0enix (Friar) on Aug 28, 2007 at 14:29 UTC
    It is now working fine for me. I suggest to add onLoad JavaScript handler which will finish checkbox initialization after page load. Example untested code: 
    <script type="text/javascript">//<![CDATA[
function init() {
  twofastest = document.getElementById('twofastest');
  if ( twofastest ) {
    if ( twofastest.checked ) {
      twofastestClick();
    } else {
      checkBoxClick();
    }
  }
}
window.onload = init;
//]]></script>

    [download]
[reply]
[d/l]
      Hi, Do the line code: " twofastest = document.getElementById('twofastest'); if ( twofastest )" will retrieve the elementid "twofastest" while window load the page ? Because in my code after i add condition "if", it works. Before it always throw eror element id is null because it was calling on load page
[reply]
        Jesus please let me give you some advice to avoid all future bugs of this nature, that whole object oriented style of writing HTML code makes me cry just write the actual code out and you will see that every single unique checkbox has an onClick() that you can add to it, javascript and HTML mesh like candy, javascript and OOP style generated HTML mesh like hotdogs and cold rice.
[reply]

Back to Seekers of Perl Wisdom