Forum

Thread tagged as: Question, Forms

radio button hide/display text box

Hi,

I was wondering if it was possible to hide/display an input textbox within a form, if a particular radio button has been selected.

So, in my form example I was thinking along the lines of:

<perch:input id="ntw-patient-meeting-person" type="radio" options="Patient|patient, Carer|carer, Other|other" />
<perch:if id="ntw-patient-meeting-person" value="other">
      <perch:input name="ntw-patient-meeting-other" type="text" id="ntw-patient-meeting-other" placeholder="Other" label="Other" />
</perch:if>

Not sure if what I am trying to achiveve is possible, but it should be feasible ?

Thanks,

Andy

Diagnostic Report


    Perch: 2.8.34, PHP: 7.0.4, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: f59eb767fe17a6679589b5c076d9fa88d3d4eac0 $, with PDO
    Server OS: WINNT, apache2handler
    Installed apps: content (2.8.34), assets (2.8.34), categories (2.8.34), perch_events (1.9.2), perch_forms (1.8.3), perch_fundraisingstories (5.0), perch_news (5.0), perch_patientstories (5.0), perch_resources (5.0), perch_twitter (3.5.1)
    App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_twitter', 'perch_forms', 'perch_events', 'perch_news', 'perch_resources', 'perch_fundraisingstories', 'perch_patientstories' );
    PERCH_LOGINPATH: /admin
    PERCH_PATH: C:\KDL-Projects\Open\kdl_ThrombosisUK\website\www\admin
    PERCH_CORE: C:\KDL-Projects\Open\kdl_ThrombosisUK\website\www\admin\core
    PERCH_RESFILEPATH: C:\KDL-Projects\Open\kdl_ThrombosisUK\website\www\admin\resources
    Image manipulation: GD
    PHP limits: Max upload 128M, Max POST 128M, Memory: 128M, Total max file upload: 128M
    F1: 6a33f95eca3667f9e0c39bf5ca2980fe
    Resource folder writeable: Yes
    HTTP_HOST: thrombosisuk.kdl
    DOCUMENT_ROOT: C:/KDL-Projects/Open/kdl_ThrombosisUK/website/www
    REQUEST_URI: /admin/core/settings/diagnostics/
    SCRIPT_NAME: /admin/core/settings/diagnostics/index.php

Andrew Kennedy 0 points

4 years ago

Simon Clay 127 points

4 years ago

Hi Andrew,

There is no 'Perch specific' way to do this, but it is possible to achieve with JS/JQuery.

I have implemented similar to what you describe on a Perch form here: https://www.spritesdental.com/book-a-sprite/

Eg: You'd wrap the ntw-patient-meeting-other field in a div with the class of 'option-box' and hide it in your css with display:none;

Then use a bit of jquery to dynamically show/hide the option-box. In your case, something like this (untested):

<script>
    $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="other"){
                $(".option-box").not(".yes").hide("slow");
                $(".yes").show("slow");
            }
            if($(this).attr("value")=="patient"){
                $(".option-box").not(".no").hide("slow");
                $(".no").show("slow");
            }
            if($(this).attr("value")=="carer"){
                $(".option-box").not(".no").hide("slow");
                $(".no").show("slow");
            }

        });
    });
</script>

<perch:input id="ntw-patient-meeting-person" type="radio" options="Patient|patient, Carer|carer, Other|other" />

<div class="option-box">
    <perch:input name="ntw-patient-meeting-other" type="text" id="ntw-patient-meeting-other" placeholder="Other" label="Other" />
</div>

Andrew Kennedy 0 points

4 years ago

Hi Simon,

Thanks for this. Yeah, I had wondered / hoped that their would be a Perch solution, but I will look at implementing something along the lines you have outlined.

Direct implementation does not work, so I will look at seeing what I can do to get it working.

Once again, thank you so much for your quick response, really appreciated.

Andy

Andrew Kennedy 0 points

4 years ago

Bit of a quick rewrite and all sorted.

Thank you once again, main answer being there isn't a PErch way of doing it, so out comes the trusty javascript !!!

Cheers Simon

Simon Clay 127 points

4 years ago

Great! Glad it worked :)