Beefy Boxes and Bandwidth Generously Provided by pair Networks
Keep It Simple, Stupid

Show / hide text field in application

by ady (Deacon)
on Jun 22, 2010 at 05:37 UTC ( #845838=perlquestion: print w/replies, xml ) Need Help??

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

Felow monks,

I have a 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 doc., I can find no property on the field to accomplish this.

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

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 => '', -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 application
by dsheroh (Monsignor) on Jun 22, 2010 at 09:32 UTC
    CGI (and 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 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 application
by Anonymous Monk on Jun 22, 2010 at 06:47 UTC
    Digging into the doc., I can find no property on the field to accomplish this.

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

Re: Show / hide text field in 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') {'visible'; } else if (n=='hide') {'hidden'; } } </script>
    And in your 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 framework.


Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: perlquestion [id://845838]
Approved by AnomalousMonk
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others drinking their drinks and smoking their pipes about the Monastery: (1)
As of 2022-10-01 07:29 GMT
Find Nodes?
    Voting Booth?
    I prefer my indexes to start at:

    Results (126 votes). Check out past polls.