Question

各位大家好：D 我不知道如何在两个可行的选择之间隐藏或显示我想要的形式。

Etudiant - ＆gt; studentForm

员工 - ＆gt; employeeForm

正在发生的事情是虽然它改变了形式，但是当我按下提交按钮而不是选择我的combox时！然而，所选组合框的名称变化很大我不明白：3 为了达到这个目的，我交换了两种形式，即学生表格显示员工的表格，反之亦然......

如果我在逻辑上将值放在那里，那么出现并提交的学生表单就不会再做了我的代码用Django python编码

我的jquery或我的表格中有什么问题我不知道？

这是我的模板

<!DOCTYPE html>

{% extends "polls/base.html" %}
{% block title %}Création d'un profil{% endblock %}
{% block bodyId %}userProfilePage{% endblock %}

{% block content %}
<script type="text/javascript" src="/static/js/jquery-1.12.0.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        displayRightForm();
    });

    function displayRightForm() {
        if ($("#profileType").val() == 'employee') {
            $('#employeeForm').hide();
            $('#studentForm').show();
        } else {
            $('#studentForm').hide();
            $('#employeeForm').show();
        }
    }
$('select').on('change', function() {
    displayRightForm();
});
</script>


<h1>Création d'un compte</h1>
<form>
    <p>
        <label>Vous êtes :</label>
        <select id="profileType">
            <option value="student" {% if studentForm.is_bound %} selected="selected" {% endif %}>Étudiant</option>
            <option value="employee" {% if employeeForm.is_bound %} selected="selected" {% endif %}>Employé</option>
        </select>
    </p>
</form>

<form action="register" method="GET" id="employeeForm">
    {{ employeeForm.as_p }}
    {% csrf_token %}
    <p>
        <input type="hidden" name="profileType" value="employee" />
        <input type="submit" value="Créer un compte" />     
    </p>
</form>

<form action="register" method="GET" id="studentForm">
    {{ studentForm.as_p }}
    {% csrf_token %}
    <p>
        <input type="hidden" name="profileType" value="student" />
        <input type="submit" value="Créer un compte" />
    </p>
</form>

<div id="two">


<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>

{% endblock %}

我尝试过这种方法：

    <script type="text/javascript">
    $(document).ready(function(){
    $('select').on('change', function() {
        if(this.value == 'student')
      {
        $("#student").show();
        $("#employee").hide();
      }
        else if(this.value == 'employee')
      {
        $("#employee").show();
        $("#student").hide();

      }
    });
});
</script>

但是不要再做了......

Answer 1

这里有一个例子：

$(document).ready(function() {

  action();
  $(".disabler").on("change", action);



});

function action() {

  var checked = $(".disabler").prop("checked");

  if (checked) {
    $(".showable").removeClass("hidden");
  } else {
    $(".showable").addClass("hidden");

  }

}

.hidden {
  display: none;
}

.form{
  border: 1px solid black;
  background-color: #aaa;
  padding: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Show form
<input class="disabler" type="checkbox">

<div class="showable">
  <h2>Form</h2>
  
  <form class="form">
  Name <input type="text">
  </form>
  
</div>

Answer 2

请查看这篇文章

show and hide div depending upon selected checkbox with combobox option

使用您的表单ID，您可以显示隐藏您的表单。

如何使用组合框隐藏/显示表单

2 个答案: