显示基于下拉菜单的表单:JavaScript 和 HTML

huangapple go评论61阅读模式
英文:

Show forms based on dropdown menu: javascript and html

问题

你有这个HTML,我想根据从下拉菜单中选择的值来显示不同的表单。根据这个答案,我提出了以下解决方案,但它并不如我所愿,也就是说,无论选择什么,所有表单都从一开始就显示出来。

我还尝试了JavaScript函数的其他版本,但没有太大的成功。这个HTML应该通过Flask函数呈现。感谢任何建议。

英文:

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.

答案1

得分: 0

将它们包装在一个容器中,隐藏它,然后切换每个,除了选定的一个。

尝试这个:

<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">信息类型</label>
            <select class="form-select" id="info_type" name="info_type">
                <option value="choose">--选择--</option>
                <option value="general">一般查询</option>
                <option value="credit">信用查询</option>
                <option value="payment">付款问题</option>
            </select>
        </div>

        <div class="hidden">
            <div class="general" id="general">
                <label for="select">您是如何得知我们的?<span>*</span></label>
                <br>
                <select name="case" id="case-type">
                    <option value="value1">选项 1</option>
                </select>
                <br>
            </div>
            <div class="credit" id="credit">
                <label for="Date of Inquiry">查询日期<span>*</span></label>
                <input type="date">
                <label for="Agency">机构 3<span>*</span></label>
                <input type="text">
            </div>
            <div class="payment" id="payment">
                <label for="Service Phone Number">服务电话号码<span>*</span></label>
                <input type="text">
                <label for="select">主题<span>*</span></label>
                <br>
                <select name="case" id="case-type">
                    <option value="topic1">主题 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">提交</button>
            </div>
        </div>
    </div>
</form>
英文:

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

Try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

.hidden div {
display: none;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月27日 18:10:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75579113.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定