CODEWITHSUNDEEP
jqueryshow-hide
kpedrick1
kpedrick1

Reputation: 15

Hide Div based on Select Option

I have a form where I need to Show/Hide Sections based on a select box value

I have peeled the code down to just the jquery for this function. Verified the field value is being set, but no change on the form.

<script type="text/JavaScript">
    $(document).ready(function(){
        $('#patientType').change(function(){
            if ($(this).val() == 'Adult'){
                $(".adultSection").show();
                $(".appregnumber").addClass('validate[required]');

                $(".minorSection").hide();
                $(".minor_patient_information").removeClass('validate[required]'); 
             }

                else if ($(this).val() == 'Minor'){
                    $(".adultSection").hide();
                    $(".appregnumber").removeClass('validate[required]');

                    $(".minorSection").show();
                    $(".minor_patient_information").addClass('validate[required]');
                }

                else{
                    $(".adultSection").hide();
                    $(".appregnumber").removeClass('validate[required]');

                    $(".minorSection").hide();
                    $(".minor_patient_information").removeClass('validate[required]');
                }         
             }       
        });

    </script>

Class in form 

                           <div class="form-section">
                            <span class="select-box">
                                <select id="patientType"
                                        size="1"
                                        class="CGpatient_type validate[required]">
                                    <option value="">Select your gender designation *</option>
                                    <option value="Adult">Adult Patient</option>
                                    <option value="Minor">Minor Patient (under 18)</option>
                                </select>
                            </span> 
                         </div> 

                    <div class="adultSection" style="display:none;">
                        <div class="clearfix"></div>
                        <br/>
                        <br/>
                        <table>
                            <tr>
                                <td class="h1">Patient Application Number</td>
                                <td class="h2"></td>
                                <td class="d3"></td>
                            </tr>
                        </table>
                        <div class="form-three-section">
                            <p>
                                <input type="text" id="App_Reg_Number__c"
                                         placeholder="Patient Application Number *"
                                         size="40"
                                         styleClass="appregnumber"/>
                            </p>
                        </div>
                    </div>

                    <div class="clearfix"></div>

I am not able to tell if the condition is being met, Select Adult as the type. div is never shown.

Updated based on the comments provides, Still no love

Upvotes: 1

Views: 479

Answers (1)

Milney
Milney

Reputation: 6417

You are selecting AdultSection by Id

$("#adultSection").show();

When it is actually a class...

<div class="AdultSection" style="display:none;">

Change to 

$(".adultSection").show();

Edit: As Grant points out in the comments, you should also probably have closing brackets for your $(document).ready({ block which is currently unclosed. You also technically shouldn't use [ or ] in a class name, although many javascript libraries do and it is widely handled by browsers.

Upvotes: 1

Related Questions