javascript - Dynamic hide/unhide tab regarding a form field value in django template -

I have a template that presents three forms in the tab.

The third form is hidden and I want to dynamically select the field of the second form (drop down option).

When I select the b-option option on another form, I want to show the third tab.

Any thoughts?

input.html (template)

  & lt; Form class = "form-horizontal" method = "post" & gt; {% Csrf_token%} & lt; Div class = "tab-panel" & gt; & Lt; Ul class = "nav nav-tabs" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "# 1" data-toggle = "tab" & gt; Demographics & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# 2" data-toggle = "tab" & gt; Diagnosis & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "hide" & gt; & Lt; A href = "# 3" data-toggle = "tab" & gt; A_b_sickle & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "tab-content" & gt; & Lt; Div class = "active in tab-panel active" id = "1" & gt; & Lt; Div class = "container" & gt; {% Crispy frm%} & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "tab-leaf fade" id = "2" & gt; & Lt; Div class = "container" & gt; {% Crispy frm_d%} & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "tab-panel" id = "3" & gt; & Lt; Div class = "container" & gt; {% Crispy frm_a_b_s%} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt;  

views.py

  Diaif input (request): Reference = Anurodkanteks (request) that request.method == ' Post ': my_demographics = demographic format (request. POST, prefix = "demo") My_diagnosis = Nidanform (request. POST, prefix =' Dayg ') my_a_b_sickle = A_b_sickle_thalForm (request. POST, prefix =' Ak_bi_s') that my_demographics.is_valid () And my_diagnosis.is_valid () and my_a_b_sickle.is_valid: my_demographics_object = my_demographics.save () my_diagnosis_object = my_diagnosis.save (committed = false) my_diagnosis_object.patient = my_demographics_object my_diagnosis_object.save () my_a_b_sickle_object = my_a_b_sickle.save (Pratib My_a_b_sickle_object. My_a_b_sickle_object.patient = my_demographics_object my_a_b_sickle_object.save () and: my_demographics = DemographicForm (prefix = 'demo') my_diagnosis = DiagnosisForm (prefix = 'diagnosis') my_a_b_si ckle = A_b_sickle_thalForm (prefix = 'a_b_s') return render_to_response ( 'input.html', { 'frm': my_demographics, 'frm_d': my_diagnosis, 'frm_a_b_s': my_a_b_sickle}, context)  

models.py < / P> Class diagnosis (models.Model): Patient = Model. Foreign key (demographic) age_of_diagnosis = models.IntegerField (null = true, blank = True) Diagnosis_option_value = (( "one option, 'an option'), (B-option", "B" option), ) diagnosis_option = models.CharField (MAX_LENGTH = 45, option = diagnosis_option_value, default = Nidan_prkash_vlu [0] [0]) def __str __ (self): return unstar (own backup)

< strong> edit: after rendering template code

<= "id_diag-diagnosis_option" class = "control label requiredField label" & gt;> & lt East; Div id = "div_id_diag-diagnosis_option" class = "farm group" & gt; & Lt; Diagnosis options & lt; Span class = "asteriskfield" & gt; * & Lt; / Span & gt; & Lt; / Labels & gt; & Lt; Div class = "control" & gt; & Lt; Selection class = id = "id_diag-diagnosis_option" "select form control" name = "diag-diagnosis_option" & gt; & Lt; Option value = "one-option" selected = "selected" & gt; One-option & lt; / Options & gt; & Lt; Option value = "b-option" & gt; B option & lt; / Options & gt; Select & gt; & Lt; / Div & gt; & Lt; / Div & gt;

Edit: My Solution

  & lt; Script & gt; $ (Document) .ready (function () {$ ('# id_diag-diagnosis_option'). Change (function () {var value = $ (this) .val () if (value === 'b-option') {$ ('# Mytab a [href = "# 3"]). Parents (). RemoveClass ("hide");}});}); & Lt; / Script & gt; You must do this in javascript / jQuery:  
 
 
 Code> // Bind each check box to $ ("# id_diag-diagnosis_option"). Change (function () {// option var value = $ (this) .value () // check the value tab ('show');}})  
 
 don 'tab For  tab_id  correct  myTab a  and forget to replace with the correct API call!