jQuery to hide form depending on select field?

Question

I have an HTML form with multiple select fields... I want to display/hide a div based on a user's selection of a previous field. Specifically, if a user selects "Before" or "After" on the select field, I want to hide the #Length-div... the odd thing is that I have already gotten this to work for the #Yes div, and I don't know what the difference is between these two.

        <div class="required">
            <label class="control-label" for="before_after">When?</label>
            <select class="form-control" id="before_after" name="before_after" required="">
                <option selected="" value="Until the prayer after">Until the prayer after</option>
                <option value="Before">Before</option>
                <option value="After">After</option>
            </select>
        </div>
        <div class="form-group  required">
            <label class="control-label" for="recurring">Recurring</label>
            <select class="form-control" id="recurring" name="recurring" required="">
                <option selected="" value="No">No</option>
                <option value="Yes">Yes</option>
            </select>
        </div>
        <div name="Length-div" id="Length-div" style="display:none;">
            {{ wtf.form_field(form.length)}}
        </div>

        <div name="Yes" id="Yes" style="display: none;">
            {{ wtf.form_field(form.frequency)}}
            {{ wtf.form_field(form.end)}}
        </div>

My Jquery scripts:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
$(document).ready(function(){
    $("#recurring").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue=="No"){
                $("#Yes").hide()
            } else{
                $("#Yes").show();
            }
        }).change();
    $("#before_after").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue2 = $(this).attr("value");
            if(optionValue2=="Until the prayer after"){
                $("#Length-div").show();
            } else{
                $("#Length-div").hide();
            }
            
        }).change();
    });
});

});
</script>

Could you please let me know why my code works for the #Yes div but not for the #Length-div ? Thank you in advance!

Some notes: To get the selected value, use `$(this).val()` You don't need to iterate over the options with the selected attribute, or look for the value attribute. And...what's up with that `.change()` at the end of your functions? — devlin carnate, Aug 28 '20 at 19:33
Please edit your question to include how a [minimal,reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) that shows the problem (e.g. you say the Yes code works - however we cannot see that, to see what the difference is). i.e, please show us the generated HTML that the JD is working on, and not the template file — FluffyKitten, Aug 28 '20 at 19:45

score 0 · Accepted Answer · answered Aug 28 '20 at 19:36

Your code structure is not proper otherwise it is working fine see below example

$(document).ready(function(){
    $("#recurring").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue=="No"){
                $("#Yes").hide()
            } else{
                $("#Yes").show();
            }
        })
});
  $("#before_after").change(function(){
      debugger
        $(this).find("option:selected").each(function(){
            var optionValue2 = $(this).attr("value");
            if(optionValue2=="Until the prayer after"){
                $("#Length-div").show();
            } else{
                $("#Length-div").hide();
            }
            
        })
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="required">
            <label class="control-label" for="before_after">When?</label>
            <select class="form-control" id="before_after" name="before_after" required="">
                <option selected="" value="Until the prayer after">Until the prayer after</option>
                <option value="Before">Before</option>
                <option value="After">After</option>
            </select>
        </div>
        <div class="form-group  required">
            <label class="control-label" for="recurring">Recurring</label>
            <select class="form-control" id="recurring" name="recurring" required="">
                <option selected="" value="No">No</option>
                <option value="Yes">Yes</option>
            </select>
        </div>
        <div name="Length-div" id="Length-div" style="display:none;">
            {{ wtf.form_field(form.length)}}
        </div>

        <div name="Yes" id="Yes" style="display: none;">
            {{ wtf.form_field(form.frequency)}}
            {{ wtf.form_field(form.end)}}
        </div>

I have also removed your change() method because that was doing maximum call stack and that is really not needed if you want to do by default you can use css `style="display:none"` — Sourabh Somani, Aug 28 '20 at 19:37

jQuery to hide form depending on select field?

1 Answers1