javascript afficher aucun bloc

Question

J'utilise Javascript pour masquer les formes sur la page HTML, qui sont générées en utilisant WTForms. Le code JS est comme ci-dessous. Quand je sélectionne d'abord "Flap", je peux voir flap_form affiché, mais quand je sélectionne "Down" après "flap", flap_form est toujours affiché. C'est pareil, quand je clique "". Une logique similaire semble fonctionner sans Python - signifie HTML simple.

<script type="text/javascript" charset="utf-8"> 
function showData() { 
    var theSelect = interface_form.interface_state; 
     if (theSelect[theSelect.selectedIndex].value == 'Down') { 
      document.getElementById("form_down2").style.display = "none"; 
      document.getElementById("form_flap").style.display = "none"; 
      } 
     if (theSelect[theSelect.selectedIndex].value == 'Flap') { 
      document.getElementById("form_down2").style.display = "none"; 
      document.getElementById("flap_form").style.display = "block"; 
      } 
     if (theSelect[theSelect.selectedIndex].value == '') { 
      document.getElementById("form_down2").style.display = "none"; 
      document.getElementById("flap_form").style.display = "none"; 
      } 
    } 
</script> 

Code Flask:

@app.route('/') 
def index(): 
    #global interface_form, form_flap, form_down, stime, etime, tkt, flap_form, down_form 
    interface_form = interface_state_form(request.form) 
    form_flap = flap_form(request.form) 
    form_down = down_form(request.form) 
    return render_template("test2.html",interface_form=interface_form,form_down=form_down,form_flap=form_flap) 

Code HTML:

<form method= POST name = interface_form id = interface_form onclick="showData()"> 
      <table> 
       {% for field in interface_form %} 
       <tr> 
          <td>{{ field.label }}*</td><td>{{ field }}</td> 
       </tr> 
       {% endfor %} 
      </table> 
</form> 
<script type="text/javascript" charset="utf-8"> 

<form method= POST name = form_down2 id = form_down2 style = "display:none" action="{{ url_for('service_down_manual') }}"> 
      <table> 
       {% for field in form_down %} 
       <tr> 
          <td>{{ field.label }}*</td><td>{{ field }}</td> 
       </tr> 
       {% endfor %} 
      </table> 
    <input id = "generate" name="generate" type=submit value=Next> 
</form> 

<form method= POST name = flap_form id = flap_form style = "display:none" action="{{ url_for('momentary_impact_flap_manual') }}"> 
      <table> 
       {% for field in form_flap %} 
       <tr> 
          <td>{{ field.label }}*</td><td>{{ field }}</td> 
       </tr> 
       {% endfor %} 
      </table> 
    <input id = "generate" name="generate" type=submit value=Next> 
</form> 

Answer 1

Dans l'appel à cacher le rabat, vous utilisez un ID différent de celui des autres appels. essayez ceci

<script type="text/javascript" charset="utf-8"> 
function showData() { 
    var theSelect = interface_form.interface_state; 
    if (theSelect[theSelect.selectedIndex].value == 'Down') { 
     document.getElementById("form_down2").style.display = "none"; 
     document.getElementById("flap_form").style.display = "none"; 
     } 
    if (theSelect[theSelect.selectedIndex].value == 'Flap') { 
     document.getElementById("form_down2").style.display = "none"; 
     document.getElementById("flap_form").style.display = "block"; 
     } 
    if (theSelect[theSelect.selectedIndex].value == '') { 
     document.getElementById("form_down2").style.display = "none"; 
     document.getElementById("flap_form").style.display = "none"; 
     } 
} 
</script>