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. 

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) 

私はロジックを実装する方法とDjangoでロジックを実装すべき場所がわかりません。私base.htmlで

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> 

を追加しました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(); 
 
    } 
 
}