Hide Div based on Select Option

Question

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

I updated it as suggested to ``` $(".adultSelection").show(); ``` same result — kpedrick1, Jun 26 '19 at 21:36
If your doctype is wrong class names will be case sensitive. Try change both to the same case, i.e. adultSection and AdultSection. We cant see the head of your document so dunno if thats the case, but worth a shot. I'm assuming you get no errors in the console? — Milney, Jun 26 '19 at 22:37
I updated the syntax and still no love. I can send you the link if you can take a look at the console. — kpedrick1, Jun 26 '19 at 23:12
It works for me, I've copy and pasted the code to this fiddle: https://jsfiddle.net/L1v0x8gn/2/ and it's working there. So either there is an outer DOM element in the broader code that is effecting the code execution or something else is up. Does minorSection appear before adultSection in the HTML? — Jeff, Jun 28 '19 at 16:49
The adultSection is before the minorSection. I did attempt to point the hide / show to a different
with no success. This is on a Visualforce SF page. Jquery on the same platform is working for checkboxes. [QA site if you want to take a look](https://qa-iowamcbdreg.cs14.force.com/IDTMatellio/IDT_Matelliocaregiver_4) — kpedrick1, Jul 01 '19 at 18:21

Milney · Answer 1 · 2019-06-26T20:31:14.287

1

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.

edited Jun 26 '19 at 20:31

answered Jun 26 '19 at 20:21

Milney

6,253
2
19
33

I know that they may not be causing the breakage, but you could add to your answer that the ``$(document).ready`` doesn't have closing brackets, and that the user has brackets [] in the class names, which is illegal. – Grant Noe Jun 26 '19 at 20:25
@GrantNoe Most browsers will happily deal with those two conditions though and still run the javascript – Milney Jun 26 '19 at 20:26
Looks like, as you said, it's likely being used in a library (most likely a validator in this case): https://stackoverflow.com/questions/3483391/what-do-square-brackets-in-class-names-mean I had previously accepted the following thread as gospel: https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors Seems inconsistent, but I know that there are exceptions to most rules. – Grant Noe Jun 26 '19 at 20:37
Why use a class here - shouldn't this be an ID? `adultSection` doesn't refer to a group of input fields in the example HTML, but a specific `
`
– Jeff Jun 26 '19 at 20:48
@Jeff The div was given a class of that in OPs original code. I'm not guessing his intentions, maybe he is going to add another element later and wants both to show/hide. I was just saying how to make his code, as it was, work. You could change it to an ID to be purist, but it doesn't really matter as there isn't likely to be a conflicting 'AdultSection' class in any frameworks hes using - it will work the same either way, and the function is called once not in a tight loop so slight performance difference doesn't matter. If we were on codereview. then I would probably mention that – Milney Jun 26 '19 at 20:54
I updated the code in the example. @jeff There is additional code in the form for the Minorsection, but not included here to save space. – kpedrick1 Jun 26 '19 at 22:01

Hide Div based on Select Option

1 Answers1