자바 스크립트 디스플레이 없음 블록

Question

WTForms를 사용하여 생성 된 HTML 페이지의 양식을 숨기려면 Javascript를 사용하고 있습니다. JS 코드는 아래와 같습니다. "Flap"을 처음 선택하면 flap_form이 표시되는 것을 볼 수 있지만 "flap"다음에 "Down"을 선택하면 flap_form이 계속 표시됩니다. ''을 (를) 클릭하면 동일합니다.

비슷한 논리가 Python없이 작동하는 것처럼 보입니다 - 평범한 HTML을 의미합니다.

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

플라스크 코드 :

@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) 

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

, 당신은 다른 통화와 다른 ID를 사용하고 있습니다. 이것을 시도하십시오

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