enable disable a textfield on the selection of dropdown value in 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>

score 1 · Answer 1 · answered Feb 08 '17 at 19:42

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();
    }
}

answered Feb 08 '17 at 19:42

SHIVAM JINDAL

2,844
1
17
34

do I need to write it in my register.html – Mohammad Shahbaz Feb 08 '17 at 19:46
I gave it but its not working, check my edited register.html in the question. – Mohammad Shahbaz Feb 08 '17 at 19:57
where is this script in code. and also you have to include Jquery in HTML – SHIVAM JINDAL Feb 08 '17 at 20:02
I have added script, check it out – Mohammad Shahbaz Feb 08 '17 at 20:02
add type="text/javascript"; – SHIVAM JINDAL Feb 08 '17 at 20:10
and also include JQUERY cdn in your base.html – SHIVAM JINDAL Feb 08 '17 at 20:10
added the Jquery .. see the edited question.. But it is still not working. – Mohammad Shahbaz Feb 08 '17 at 20:18
you did not extent base.html in register.html in edited file. – SHIVAM JINDAL Feb 09 '17 at 05:59
$('[name="institution"]') this line in linking your dropdown in JS function – SHIVAM JINDAL Feb 09 '17 at 06:00
I am extending it, I forgot to include it earlier in my question. Check it out now. – Mohammad Shahbaz Feb 09 '17 at 18:52

enable disable a textfield on the selection of dropdown value in Django

1 Answers1