启用在Django中选择下拉值时禁用文本字段

Question

I have a register page in Django which contains some textfield and a dropdown value.

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)

Currently all the fields are displaying on my register page. But the field

otherInstitute

should be displayed only when a user selects

**Other** in institution dropdown.

register.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)

I am not sure how to implement the logic and where I should implement the logic in Django.

EDIT

register.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>

Added Jquery in my base.html

<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

You should use JQuery or JavaScript. define a method in javascript and associate it with onChange event of dropdown field.

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