[FIXED] Show forms based on dropdown menu: javascript and html

Issue

I have this html that I want to display different forms based on the value selected from a dropdown menu. Based on this answer, I came up with this solution, This means that all forms are displayed from the beginning, regardless of your selection.

{% extends "base.html" %}

{% block title %} info {{configuration}} {% endblock %}
{% block content %}


         Info {{Configuration}}

        You can enter the required information here
        
                
                        
                                Info type
                                
                            

                
                        How did you hear about us?*

                        

                    
                
                    
                        Inquiry Date*
                        
                        Agency 3 *
                        
                    
                
                    
                        Service Phone Number*
                        
                        Topic*

                        


                    
                    


                
                        
                                
                        
                
        
        

{% End Block %}

I’ve also tried other versions of the JavaScript function with no success. This html is supposed to be rendered via flask functions.
Any suggestions would be greatly appreciated.

Solution

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>

Answered By – traynor

Answer Checked By – David Goodson (Easybugfix Volunteer)

Tags: flask, html, javascript

Easy Bug Fix

[FIXED] Show forms based on dropdown menu: javascript and html

Issue

Info {{Configuration}}

Solution

Leave a Reply Cancel reply