Home Downloads Forums Shop FAQs Blog Contact Demo Login
Home
/
Forums
/
Show/Hide fields depending on Radio button

Show/Hide fields depending on Radio button

ta
taung 19 Jan, 2011
Hello,

I am trying to apply the code I found in Chronoform book for "Other" field where the text input field is hidden until other is selected in dropbox.

I want to use a Yes/No radio button to show a group of addition input fields.

So far I can make it show when Yes is selected but I can't make it disappear when No is selected.

Here is my HTML code:

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Boolean</label>
    <div class="float_left">
      <input value="Yes" title="" class="radio" id="dependent_controller" name="dependent_controller" type="radio" />
      <label for="radio10" class="radio_label">Yes</label>
            
      <input value="No" title="" class="radio" id="dependent_controller" name="dependent_controller" type="radio" />
      <label for="radio10" class="radio_label">No</label>
      
      <br />
      
    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item" id="dependent_group">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Dependent Input1</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="dependent_input1" name="dependent_input1" type="text" />
  </div>
  
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Dependent Input2</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="dependent_input2" name="dependent_input2" type="text" />  
  </div>  

  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Dependent dropdown</label>
    <select class="cf_inputbox" id="dependent_dropdown" size="1" title=""  name="dependent_dropdown">
    <option value="">Choose Option</option>
        <option value="option 1">option 1</option>
        <option value="option 2">option 2</option>
        <option value="option 3">option 3</option>

    </select>  
  </div>
  
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;">Dependent Checkbox</label>
    <div class="float_left">
        <input value="check 1" title="" class="radio" id="check20" name="check2[]" type="checkbox" />
        <label for="check20" class="check_label">check 1</label>
        <br />
      
        <input value="check 2" title="" class="radio" id="check21" name="check2[]" type="checkbox" />
        <label for="check21" class="check_label">check 2</label>
        <br />
      
        <input value="check 3" title="" class="radio" id="check22" name="check2[]" type="checkbox" />
        <label for="check22" class="check_label">check 3</label>
        <br />
      

    </div>
    
  </div>
  
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Dependent Radio</label>
    <div class="float_left">
        <input value="radio 1" title="" class="radio" id="radio30" name="radio3" type="radio" />
        <label for="radio30" class="radio_label">radio 1</label>
        <br />
      
        <input value="radio 2" title="" class="radio" id="radio31" name="radio3" type="radio" />
        <label for="radio31" class="radio_label">radio 2</label>
        <br />
      
        <input value="radio 3" title="" class="radio" id="radio32" name="radio3" type="radio" />
        <label for="radio32" class="radio_label">radio 3</label>
        <br />
      

    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>


Here is my Javascript code:

window.addEvent('domready', function() {
    $('dependent_controller').addEvent('change', function() {
        if ($('dependent_controller').checked) {
            $('dependent_group').setStyle('display', 'block');
        } else {
            $('dependent_group').setStyle('display', 'none');
        }
    });
    // initialise the display
    if ($('dependent_controller').checked) {
        $('dependent_group').setStyle('display', 'block');
    } else {
        $('dependent_group').setStyle('display', 'none');
    }
});


What am I missing?????
Gr
GreyHead 19 Jan, 2011
Hi tuang,

Your code checks to see if the input with id='dependent_controller' is checked. But you have two inputs with this id and one of them is always checked. Also the event is tied to the same amiguous input.

Duplicate id's are not permitted in HTML, most of the time they do no harm but they will mess up your scripts.

Change the HTML to add the event to the wrapping div and give the radio buttons distinct ids and the code will work OK:
<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Boolean</label>
    <div class="float_left" id="dependent_controller">
      <input value="Yes" title="" class="radio" id="dependent_controller_0" name="dependent_controller" type="radio" />
      <label for="radio10" class="radio_label">Yes</label>
      <input value="No" title="" class="radio" id="dependent_controller_1" name="dependent_controller" type="radio" />
      <label for="radio10" class="radio_label">No</label>
      <br />
    </div>
  </div>
  <div class="cfclear"> </div>
</div>
. . .
and make the corresponding change in the script to check dependent_controller_0
window.addEvent('domready', function() {
    $('dependent_controller').addEvent('change', function() {
        if ($('dependent_controller_0').checked) {
            $('dependent_group').setStyle('display', 'block');
        } else {
            $('dependent_group').setStyle('display', 'none');
        }
    });
. . .

Bob
ta
taung 07 Mar, 2011
I just discovered an issue with hiding fields and setting values to them depending on selected radio button.

The code I have works for FireFox and Chrome but does not work for any version of IE.

This is my HTML code.

<div id="minor_dependent_group"> <!--BEGINNING OF minor_dependent_group-->
    <div class="form_item">
        <div class="form_element cf_heading">
            <h2 class="cf_text">Parent or guardian information</h2>
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">First Name </label>
            <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="" id="parent_firstname" name="parent_firstname" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Middle Name</label>
            <input class="cf_inputbox validate-alpha" maxlength="150" size="30" title="" id="parent_middlename" name="parent_middlename" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Last Name </label>
            <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="" id="parent_lastname" name="parent_lastname" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_dropdown">
            <label class="cf_label" style="width: 150px;">Suffix</label>
            <select class="cf_inputbox" id="parent_suffix" size="1" title=""  name="parent_suffix">
                <option value="">None</option>
                <option value="Jr">Jr</option>
                <option value="Sr">Sr</option>
                <option value="I">I</option>
                <option value="II">II</option>
                <option value="III">III</option>
                <option value="IV">IV</option>
                <option value="V">V</option>
                <option value="VI">VI</option>

            </select>
    
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Employer</label>
            <input class="cf_inputbox" maxlength="150" size="30" title="" id="parent_employer" name="parent_employer" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Occupation</label>
            <input class="cf_inputbox" maxlength="150" size="30" title="" id="parent_occupation" name="parent_occupation" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_radiobutton" id=parent_address_as_pt>
            <label class="cf_label" style="width: 150px;">Same address as patient?</label>
            <input value="Yes" title="" class="radio validate-one-required" id="parent_address_as_pt0" name="parent_address_as_pt" type="radio" />
            <label for="parent_address_as_pt0" class="radio_label">Yes</label>
             
            <input value="No" title="" class="radio validate-one-required" id="parent_address_as_pt1" name="parent_address_as_pt" type="radio" />
            <label for="parent_address_as_pt1" class="radio_label">No</label>
        </div>    
        <div class="cfclear"> </div>
    </div>

    <div id="pt_parent_same_address_dependent_group"> <!--BEGINNING of pt_parent_same_address_dependent_group-->
        <div class="form_item">
            <div class="form_element cf_textbox">
                <label class="cf_label" style="width: 150px;">Address</label>
                <input class="cf_inputbox required" maxlength="150" size="30" title="" id="parent_address" name="parent_address" type="text" />
  
            </div>
            <div class="cfclear"> </div>
        </div>

        <div class="form_item">
            <div class="form_element cf_textbox">
                <label class="cf_label" style="width: 150px;">City</label>
                <input class="cf_inputbox required" maxlength="150" size="30" title="" id="parent_city" name="parent_city" type="text" />
  
            </div>
            <div class="cfclear"> </div>
        </div>

        <div class="form_item">
            <div class="form_element cf_dropdown">
                <label class="cf_label" style="width: 150px;">State</label>
                <select class="cf_inputbox validate-selection" id="parent_state" size="1" title=""  name="parent_state">
                    <option value="">Choose Option</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                    <option value="Not apply" style="display: none;">Not apply</option>

                </select>
    
            </div>
            <div class="cfclear"> </div>
        </div>

        <div class="form_item">
            <div class="form_element cf_textbox">
                <label class="cf_label" style="width: 150px;">Zip Code</label>
                <input class="cf_inputbox validate-alphanum" maxlength="5" size="5" title="" id="parent_zip" name="parent_zip" type="text" />
  
            </div>
            <div class="cfclear"> </div>
        </div>
    </div> <!--END of pt_parent_same_address_dependent_grouop-->

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Home Phone #</label>
            <input class="cf_inputbox required validate-alphanum" maxlength="10" size="30" title="" id="parent_home_phone" name="parent_home_phone" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Cell Phone #</label>
            <input class="cf_inputbox validate-alphanum" maxlength="10" size="30" title="" id="parent_cell_phone" name="parent_cell_phone" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>

    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 150px;">Email address</label>
            <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="parent_email" name="parent_email" type="text" />
  
        </div>
        <div class="cfclear"> </div>
    </div>
</div> <!--END OF minor_dependent_group-->


This is my JavaScript code

// parent address same as patient group
window.addEvent('domready', function() {          
    $('parent_address_as_pt').addEvent('change', function() {
        if ($('parent_address_as_pt0').checked) {
            $('pt_parent_same_address_dependent_group').setStyle('display', 'none');
            $('parent_address').value = 'Same as patient';
            $('parent_city').value = 'Not apply';
            $('parent_state').value = 'Not apply';
            $('parent_zip').value = '';
        } else {
            $('pt_parent_same_address_dependent_group').setStyle('display', 'block');
            $('parent_address').value = '';
            $('parent_city').value = '';
            $('parent_state').value = '';
            $('parent_zip').value = '';
        }
    });
    // initialise the display
    if ($('parent_address_as_pt0').checked) {
        $('pt_parent_same_address_dependent_group').setStyle('display', 'none');
    } else {
        $('pt_parent_same_address_dependent_group').setStyle('display', 'block');
    }
});


I am pretty sure it has something to do with how IE process the javascript during runtime.

I have a other hidden fields based on drop down selection and that works just fine.

Any idea would be much appreciated.
ta
Gr
GreyHead 07 Mar, 2011
Hi tuang,

Try changing this line to use the onClick event -- new code is:
$('parent_address_as_pt').addEvent('click', function() {
I think that IE doesn't handle onChange as well as other browsers.

Bob
ta
taung 07 Mar, 2011
Hello Grey,

I did tried that after googling around a bit. It works... sort of.

But I notice another weird behavior. On the very initial click, I have to click twice for the fields to show/hide. after that it is fine. Only in IE.

Also on the side note, neither click or change works when using keyboard in Chrome. But i can live with this if no solution is known.

Just want to make sure it is perfect in IE (sadly...).
ta
taung 07 Mar, 2011
okay.. after more research. This seems to be good solution.

Change to 'click' event.
Add
this.blur();
this.focus();

and the IE no longer needs double click.

But to make the code clean, how can I add a IF statement that detects the browser?

Current code:

window.addEvent('domready', function() {    
    $('parent_address_as_pt').addEvent('click', function() {
        this.blur();
        this.focus();
        
        if ($('parent_address_as_pt0').checked) {
            $('pt_parent_same_address_dependent_group').setStyle('display', 'none');
            $('parent_address').value = 'Same as patient';
            $('parent_city').value = 'Not apply';
            $('parent_state').value = 'Not apply';
            $('parent_zip').value = '';
        } else {
            $('pt_parent_same_address_dependent_group').setStyle('display', 'block');
            $('parent_address').value = '';
            $('parent_city').value = '';
            $('parent_state').value = '';
            $('parent_zip').value = '';
        }
    });
    // initialise the display
    if ($('parent_address_as_pt0').checked) {
        $('pt_parent_same_address_dependent_group').setStyle('display', 'none');
    } else {
        $('pt_parent_same_address_dependent_group').setStyle('display', 'block');
    }
});
Gr
GreyHead 07 Mar, 2011
Hi tuang,

If you Google you'll find the JavaScript and/or MooTools browers sniffer code.

I wonder is setting one of the radio buttons as checked might not avoid some of this?

Bob
ta
taung 07 Mar, 2011
I am not sure what you mean by that. But here is my final code. It is not the cleanest since I have to add the conditional line to every group code the I have.


// parent address same as patient group
window.addEvent('domready', function() {    
    $('parent_address_as_pt').addEvent('click', function() {
        if (navigator.appName == 'Microsoft Internet Explorer') {
            this.blur();
            this.focus();
        }
        
        if ($('parent_address_as_pt0').checked) {
            $('pt_parent_same_address_dependent_group').setStyle('display', 'none');
            $('parent_address').value = 'Same as patient';
            $('parent_city').value = 'Not apply';
            $('parent_state').value = 'Not apply';
            $('parent_zip').value = '';
        } else {
            $('pt_parent_same_address_dependent_group').setStyle('display', 'block');
            $('parent_address').value = '';
            $('parent_city').value = '';
            $('parent_state').value = '';
            $('parent_zip').value = '';
        }
    });
    // initialise the display
    if ($('parent_address_as_pt0').checked) {
        $('pt_parent_same_address_dependent_group').setStyle('display', 'none');
    } else {
        $('pt_parent_same_address_dependent_group').setStyle('display', 'block');
    }
});
ta
taung 09 Mar, 2011
another strange issue with IE, sigh.

So the javascript works perfect with normal HTTP url.

But as soon as I view the page in HTTPS, the script fails. The error details are

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MS-RTC LM 8)
Timestamp: Wed, 9 Mar 2011 01:32:06 UTC


Message: Object expected
Line: 73
Char: 2
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/coad_patientreg.html?template=DS_custom01


Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/://0


Message: Object expected
Line: 71
Char: 5
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/coad_patientreg.html?template=DS_custom01


Message: Object doesn't support this property or method
Line: 5
Char: 27523
Code: 0
URI: https://dermbiz.dreamhosters.com/templates/DS_custom01/lib/js/mootools.js

Any idea? I am so frustrated with IE.
ta
taung 09 Mar, 2011
okay, a bit more info on this issue.

First, here is the full page that I am working on https://dermbiz.dreamhosters.com/patient-porter/coad_patientreg.html?template=DS_custom01

So in IE, when I visit this site with HTTPS url, i get this warning message:

Do you want to view only the webpage content that was delivered securely? The webpage contatins content that will not be delivered using a secure HTTPS connection, which could compromise the security of the entire webpage.



If I answer Yes, the Javascripts don't work anymore. The page error is

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MS-RTC LM 8)
Timestamp: Wed, 9 Mar 2011 02:02:04 UTC


Message: Object expected
Line: 73
Char: 2
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/coad_patientreg.html?template=DS_custom01


Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/://0


Message: Object expected
Line: 71
Char: 5
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/coad_patientreg.html?template=DS_custom01


Message: Object doesn't support this property or method
Line: 5
Char: 27523
Code: 0
URI: https://dermbiz.dreamhosters.com/templates/DS_custom01/lib/js/mootools.js



If I answer No, the Javascripts works. The page error is now:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MS-RTC LM 8)
Timestamp: Wed, 9 Mar 2011 02:01:23 UTC


Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: https://dermbiz.dreamhosters.com/patient-porter/://0



So the javascript content must be running in regular HTTP but I am not very knowledgeable with this.

I need the page in HTTPS because it has sensitive content. I cannot quite publish the form as a menu item either but have to give it out as a link.
Gr
GreyHead 09 Mar, 2011
Hi tuang,

As far as I remember ChronoForms picks up the URL prefix settings from the site URL so it should behave correctly pretty much all of the time.

Which files ae being blocked if you refuse http:// ??

Bob
ta
taung 09 Mar, 2011
All the javascript actions are disabled if I refuse the HTTP connection.

When I look at the source code of the page, I do see some reference to HTTP links.
This topic is locked and no more replies can be posted.

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Terms Of Use Privacy Policy Business Partners

We accept paypal logo  stripe logo

© 2006 - 2025 ChronoEngine.com