时间戳

首页 > 解决方案 > 仅在选择特定值时显示表单域

javascript - 仅在选择特定值时显示表单域

问题描述

如何使 form.gender 字段仅在通过从类别表中获取的下拉列表从 form.category 中选择“Lost Person”时显示...... ……

索引.html

<form method="post" enctype="multipart/form-data" id="personForm" data-cities-url="{% url 
'ajax_load_areas_products' %}" novalidate  >
          {% csrf_token %}
         
          <div class="row">
            <div class="col-md-3">
            {{ form.category | as_crispy_field }}
            </div>
            <div class="col-md-3">
              {{form.product|as_crispy_field}}
            </div>
         </div>
         
         <div class="row">

          <div  class="col-md-6" >
            {{ form.title | as_crispy_field }}
        </div>
          <div class="col-md-6">
            {{ form.gender | as_crispy_field }}
          </div>
         </div>
         <div class="row">
          <div class="col-md-6">
            {{ form.description | as_crispy_field }}
          </div>
          <div class="col-md-6">
            {{ form.photo | as_crispy_field }}
          </div>
          <div class="col-md-6">

          </div>
         </div>
          <button class="btn btn-secondary btn-block mt-4" type="submit">Submit Post</button>
          
        </form>

视图.py

def PostCreate(request):

    if request.method == 'POST': 
        form = PostForm(request.POST, request.FILES) 
        if form.is_valid():  
            form.instance.user = request.user
            form.save()
            return redirect('dashboard') 
    else: 
        form = PostForm() 
    return render(request, 'chained/post_form.html', {'form' : form})

标签： javascriptpythondjangodjango-forms

解决方案

将 attr 设置display:none为您的表单。您需要编写一个 javascript 函数并在单击下拉列表中的元素时触发它。有两种方法可以实现这一点，您的下拉元素可以是直接触发 js 代码的按钮，也可以是其他元素，js 函数可以由它们的类或 id 触发。假设您决定使用按钮，您的按钮应如下所示：

<button onclick="display_form(1)"></b>

display_form当您单击此功能时会触发功能，并且您还将值“1”传递给它，告诉它要做什么。功能：

function display_form(number){
      if(number == 1){
      "here you set the required form's display attr to block and hide all the others"
}
      else if(number == 2)...

如果您根本没有掌握它，只需花几个小时学习 javascript，您就会很快掌握它。祝你好运！

推荐阅读