javascript - 启用禁用 Django 中下拉值选择的文本字段

Question

我在 Django 中有一个注册页面，其中包含一些文本字段和一个下拉值。

models.py

class UserInformation(models.Model):
      firstName = models.CharField(max_length=128)
      lastName = models.CharField(max_length=128)
      emailAddress = models.EmailField(max_length=128)
      phoneNumber = models.CharField(max_length=128)    
      orchidNumber = models.CharField(max_length=128)
      institution = models.CharField(choices = [("Inst1","Inst1"), ("Inst2","Inst2"),("Other","Other")], max_length=128)
      otherInstitute = models.CharField(default="N/A",max_length=128)
      cstaPI = models.CharField(max_length=128)

目前所有字段都显示在我的注册页面上。但场

otherInstitute

仅当用户选择时才显示

**Other** in institution dropdown.

注册.html

{% extends "base.html" %}
{% block title %}User Registration{% endblock %}
{% block head %}User Registration{% endblock %}
{% block content %}

<form method="post" action=".">{% csrf_token %}
    <table border="0">
        {{ form.as_table }}
    </table>
    <input type="submit" value="Register" />
</form>
{% endblock %}

views.py

@csrf_protect
def register(request):
    if request.method == 'POST':
        form = UserInformationForm(request.POST)
        form.save()
        return HttpResponseRedirect('/register/success/')
    else:
        form = UserInformationForm()
        variables =  { 'form': form }

    return render(request, 'registration/register.html',variables)

我不确定如何实现逻辑以及应该在 Django 中的何处实现逻辑。

编辑

注册.html

 {% extends "base.html" %}
 {% block title %}User Registration{% endblock %}
 {% block head %}User Registration{% endblock %}
 {% block content %}

 <script type="text/javascript">
$(document).ready(function () {
    $('[name="institution"]').change(function () {
        var end = this.value;

        if (end == 'Other') {
            $('[name="otherInstitute"]').show();
        }
        else {
            $('[name="otherInstitute"]').hide();
        }
    })
});
</script>

 <div class="row">
    <section id="registerForm">
          <form method="post" action=".">{% csrf_token %}
          <div class="form-group">
                  <label for="id_firstName" >First Name (*)</label>
                       {{ form.firstName }}
          </div>
          <div class="form-group">
                  <label for="id_lastName" >Last Name (*)</label>                      
                       {{ form.lastName }}                       
          </div>
          <div class="form-group">
                  <label for="id_email">Email Address (*)</label>                      
                       {{ form.emailAddress }}
          </div>
          <div class="form-group">
                  <label for="id_phone" >Contact Number</label>
                       {{ form.phoneNumber }}
          </div>
          <div class="form-group">
                  <label for="id_orchid">Orchid ID  (<a href="https://orcid.org/register">Get Orchid ID</a>)</label>
                       {{ form.orchidNumber }}   
          </div>
          <div class="form-group">
                  <label for="id_intitution">Institution (*)</label>                                    
                       {{ form.institution }}
          </div>
          <div id="otrInst" class="form-group">
                  <label for="id_otherintitution" >Other Institution</label>
                       {{ form.otherInstitute }}
          </div>
          <div class="form-group">        
               <label for="id_ctsaPI">CTSA Prinicipal Investigator (*)</label>                                    
                 {{ form.cstaPI }}

          </div> <br/><br/><br/><br/>
          <div class="form-group">
                    <input type="submit" value="Register" />
          </div>

   </form>
 </section>

在我的 base.html 中添加了 Jquery

<script type="text/javascript" src="{{ STATIC_URL }} /static/jquery-1.10.2.js"></script> 
 <script type="text/javascript" src="{{ STATIC_URL }} /static/jquery-1.10.2.min.js"></script> 

Answer 1

您应该使用 JQuery 或 JavaScript。在javascript中定义一个方法并将其与下拉字段的onChange事件关联。

$('[name="institution"]').change(function () {
    var end = this.value;
    if (end == 'Other'){
        $('[name="otherInstitute"]').show();
    }
    else {
        $('[name="otherInstitute"]').hide();
    }
}