http://qs1969.pair.com?node_id=845838

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

Felow monks,

I have a cgi.pm based web app., where I want to show / hide a text field dynamically, based on the content of another text field in the app.

Digging into the cgi.pm doc., I can find no property on the field to accomplish this.

Any help / pointers appreciated.
Best regards, - Allan Dystrup.

UPDATE
my $JSCRIPT=<<ENDJS; function show_hide_fields() { var RunCmd = document.getElementById('popRunCmd').value; var rx_ver = new RegExp("^Build"); var test_ver = ( rx_ver.test(RunCmd) ) ? "" : "none"; document.getElementById('div_ver').style.display = test_ve +r; var rx_rc = new RegExp("Build [SB]DP release Produktion") +; var test_rc = ( rx_rc.test(RunCmd) ) ? "" : "none"; document.getElementById('div_rc').style.display = test_rc; } ENDJS print $query->start_html( -title => 'eDP Run Commands', -author => 'and@kmd.dk', -script => $JSCRIPT, -base => 'false', -meta => { 'keywords' => 'eDagpenge build server commands', 'copyright' => 'copyright KMD' }, -bgcolor => '#F1F1F1', -text => '#4F4F4F', ); print "<table>" . "<tr>" . "<td>" . $query->popup_menu( -name => 'popRunCmd', -values => [ # cut out -- a lot of options goes here ... ], -default => ' ', -override => 1, -onChange => 'show_hide_fields()', ) . "</td>" . "<td>" . "<div id='div_ver' style='display:none'>" . textfield( -name => 'version', -value => '', -override => 1, -size => 8, ) . "</div>" . "</td>" . "<td>" . "<div id='div_rc' style='display:none'>" . textfield( -name => 'relcand', -value => '', -override => 1, -size => 4, ) . "</div>" . "</td>" . "</tr>" . "<table>";

Replies are listed 'Best First'.
Re: Show / hide text field in cgi.pm application
by dsheroh (Monsignor) on Jun 22, 2010 at 09:32 UTC
    CGI (and CGI.pm) code runs solely on the server, so it has no interaction with what the user sees unless new data or a new document is fetched from the server.

    All client-side dynamic functionality has to be implemented in javascript, since that's the only way to run code natively in the user's browser. (Yes, there are plugins to run other languages in browsers, but javascript is pretty much the only thing you can count on having there. Maybe also flash, if you're only targeting desktops/laptops and not mobile devices.)

    The specific property I tend to use for dynamic control of visibility is the CSS "display" property:

    <input type=text name=field1 onChange='document.getElementById("peekab +oo").style.display = "block"'> <div id='peekaboo' style='display: hidden'> <input type=text name=field2> </div>
    This should (untested code) cause the peekaboo div (and its contained field2 text field) to appear when text is entered into field1. From there, you should be able to work out the javascript logic to have it flip peekaboo.style.display back and forth between hidden and block based on the content of field1 using whatever criteria you have in mind.
      Thanks dsheroh,

      In hindsight I can see, that javascript is the way to implement client side dynamic functionality in this scenario.
      - I can take it from there :)

      Best regards, - allan
Re: Show / hide text field in cgi.pm application
by Anonymous Monk on Jun 22, 2010 at 06:47 UTC
    Digging into the cgi.pm doc., I can find no property on the field to accomplish this.

    input type="hidden" ... hidden() ..... CGI::FormBuilder

Re: Show / hide text field in cgi.pm application
by sflitman (Hermit) on Jun 26, 2010 at 22:54 UTC
    You need some javascript to do this. In your header include the following:
    <script language='text/javascript'> var oText=document.getElementById('MyTextField'); function toggle_display(n) { if (n=='show') { oText.style.visibility='visible'; } else if (n=='hide') { oText.style.visibility='hidden'; } } </script>
    And in your CGI.pm generated text fields, include properties
    for the controlling field: onchange=>'toggle_display(this.value)' for MyTextField: id=>'MyTextField'
    It's really more of a javascript/css problem, but it can be solved within the CGI.pm framework.

    HTH,
    SSF