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

Hi all - I've been using CGI.pm for several years, but am pretty new to making it work with JavaScript. I have a section of CGI code that shows and hides a couple sections of HTML based on radio buttons. The entire module is written in CGI.pm, except for this chunk. I couln't get the radio function to produce the code I needed to make the form hide and show the section. Can someone offer an equivalent version using the CGI.pm functions?
'Show Email:<input type="radio" id="hideEmail" name="radioEmail" ', 'checked="1" onclick="toggleEmail(event)" />No', '<input type="radio" id="showEmail" name="radioEmail"', 'onclick="toggleEmail(event)" />Yes',
Here's the JavaScript code that gets called by toggleEmail on the radio button in case there's something here that needs to be changed to work with the CGI.
function toggleEmail(evt) { evt = (evt) ? evt : event; var target = (evt.target) ? evt.target : evt.srcElement; var eBlock = document.getElementById("SectionEmail"); var eAction = document.getElementById("ActionEmail"); if (target.id == "showEmail") { eBlock.style.display = "block"; eAction.style.display = "inline"; } else { eBlock.style.display = "none"; eAction.style.display = "none"; var sBlock = document.getElementById("SectionSchedule"); var sCheck = document.getElementById("hideSchedule"); var sAction = document.getElementById("ActionSchedule"); sCheck.checked = "true"; sBlock.style.display = "none"; sAction.style.display = "none"; } }
Many thanks for any help.
Mike Schienle

Replies are listed 'Best First'.
Re: Equivalent functionality in CGI.pm
by CountZero (Bishop) on Jul 04, 2004 at 20:58 UTC
    Unless I am terribly wrong, CGI.pm doesn't mind outputting Javascript or HTML or XML or whatever. As far as it goes it's all text and it is resolved client-side (i.e. in the browser of the user).

    CountZero

    "If you have four groups working on a compiler, you'll get a 4-pass compiler." - Conway's Law

Re: Equivalent functionality in CGI.pm
by BUU (Prior) on Jul 04, 2004 at 18:12 UTC
    Why on earth are you trying to get CGI.pm to produce javascript, much less html? CGI.pm is horribly suited for producing html in the first place, adding javascript is going to get very ugly. Switch to decent templating system for the love of god.

      I agree. And I'm not saying you should do otherwise but I end up putting JS into CGIs now and then anyway (throwaways, portability, timeframe, etc).

      One way to do it when you feel the need to is with HERE docs. You can inline them too.

      print start_html( -title => $title, -script => <<HEREisAscript, <!-- function focus_first_field(){document.forms[0].elements[0].focus();} // --> HEREisAscript -onload => 'focus_first_field()', ), <<HERESanother, <script type="text/javascript"> <!-- function toggleEmail(evt) { // longer script omitted... } // --> </script> HERESanother 'Show Email:', radio_group(-id => 'hideEmail', -name => 'radioEmail', -values => [ qw(Yes No) ], -default => 'No', -onclick => 'toggleEmail(event)' );

      There is more information about using JS this way in the CGI perldoc itself.

        The radio_group code you provided is pretty close to what I started out with, I just couldn't get it to work with the JavaScript. And I couldn't get CGI to spit out a single radio_group using both the hideEmail and showEmail ID's. I think my real problem is sticking with CGI beyond it's usefulness. I've been checking out templating systems for a couple months, but I'm adding to an application that's been around for a lot longer. Any new development will likely be using TT.

        What I've done in the last few minutes is this, which works correctly, but it just seems wrong to make two calls to radio_group, each with one button. That's due to the JavaScript needing two different id's as currenly written.
        'Show Email:', $q->radio_group( -id => 'hideEmail', -name => 'radioEmail', -values => 'No', -default => 'No', -onclick => 'toggleEmail(event)' ), $q->radio_group( -id => 'showEmail', -name => 'radioEmail', -values => 'Yes', -default => 'No', -onclick => 'toggleEmail(event)' ),

        Mike Schienle
      The JavaScript isn't being produced by CGI, it's just being called by the CGI script. It lives in its own separate file and gets called in with a -script=> line. I just included it on the chance that I had written the JavaScript wrong and that the CGI could be rewritten to work correctly if the JavaScript could be rewritten. Or something like that.
      Mike Schienle