Show forms based on dropdown menu: javascript and html

Question

I have this html, in which I want to show different forms, based on a value chosen from a dropdown menu. Base on this answer I came up with this solution, which does not do what I intend, meaning all the form are shown from the beginning, no matter the choice.

{% extends "base.html" %}

{% block title %}Information {{configuration}} {% endblock %}
{% block content %}
<div class="px-2 py-5">

        <h3> info  {{configuration}}</h3>

        <p>Here you can input the necessary informations   </p>
        <form action="/new-simulation" method='POST'>
                <div class="mb-3">
                        <div class="mb-3">
                                <label for="info_type" class="form-label">info Type</label>
                                <select class="form-select" id="info_type" name="info_type">
                                        <option value="general">General Inquiry</option>
                                        <option value="credit">Credit Inquiry</option>
                                        <option value="payment">Payment Issue</option>
                                </select>
                            </div>

                <div class="general" id="general">
                        <label for="select">How did you find out about us?<span>*</span></label><br>
                        <select name="case" id="case-type">
                            <option value="value1">Value 1</option>
                        </select><br>
                    </div>
                
                    <div class="credit" id="credit">
                        <label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
                        <input type="date">
                        <label for="Agency">Agency 3 <span>*</span></label>
                        <input type="text">         
                    </div>
                
                    <div class="payment" id="payment">
                        <label for="Service Phone Number">Service Phone Number<span>*</span></label>
                        <input type="text">
                        <label for="select">Topic<span>*</span></label><br>
                        <select name="case" id="case-type">
                            <option value="topic1">Topic 1</option>

                        </select><br><br>
                    </div>
                    <script type="text/javascript">
                           // hide all the divs
                        $('div').hide()

                        // Show and hide selected div
                        $('#info_type').change(function () {
                        var value = this.value;

                        $('div').hide()
                        $('#' + this.value).show();
                        });
                </script>


                <div class="row mb-3">
                        <div class="col">
                                <button style="margin:5px;" class="btn btn-secondary" type="submit">submit</button>
                        </div>
                </div>
        </form>
        
</div>
{% endblock %}

I also tried other version of the javascript function, without much of a success. This html is supposed to be rendered through flask function. Any suggestion is appreciated.

Did you add the jQuery library inside the <head> tag of your html document ? — Baki
– Baki, Commented Feb 27, 2023 at 10:13
I added the line ´<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/…> ´ in the head but without success. — GMV871
– GMV871, Commented Feb 27, 2023 at 13:38

traynor · Accepted Answer · 2023-02-27 10:39:07Z

Wrap them in a container, hide it, and then toggle each except the selected one.

Try this:

$("#info_type").change(function(){          
    var value = $(this).val();
    if(value == 'choose') return;
    $("#" + value).toggle().siblings().hide();
    
});

.hidden div {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/new-simulation" method='POST'>
    <div class="mb-3">
        <div class="mb-3">
            <label for="info_type" class="form-label">info Type</label>
            <select class="form-select" id="info_type" name="info_type">
                <option value="choose">--Choose--</option>
                <option value="general">General Inquiry</option>
                <option value="credit">Credit Inquiry</option>
                <option value="payment">Payment Issue</option>
            </select>
        </div>
        
        <div class="hidden">
            <div class="general" id="general">
                <label for="select">How did you find out about us?<span>*</span></label>
                <br>
                <select name="case" id="case-type">
                    <option value="value1">Value 1</option>
                </select>
                <br>
            </div>
            <div class="credit" id="credit">
                <label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
                <input type="date">
                <label for="Agency">Agency 3 <span>*</span></label>
                <input type="text">
            </div>
            <div class="payment" id="payment">
                <label for="Service Phone Number">Service Phone Number<span>*</span></label>
                <input type="text">
                <label for="select">Topic<span>*</span></label>
                <br>
                <select name="case" id="case-type">
                    <option value="topic1">Topic 1</option>
                </select>
                <br>
                <br>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <button style="margin:5px;" class="btn btn-secondary" type="submit">submit</button>
            </div>
        </div>
    </div>
</form>

Collectives™ on Stack Overflow

Show forms based on dropdown menu: javascript and html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related