WTForms와 함께 조건부 필드를 삽입하는 방법은 무엇입니까?

Question

내가 구축중인 웹 사이트에서 Flask 양식 유효성 검사에 WTForms을 사용하고 있습니다. 현재 다른 필드에 의존하는 필드가 있습니다. 사용자가 특정 연도 (2012)를 삽입하면 Javascript를 사용하여 몇 개의 라디오 버튼이 삽입됩니다. RadioField를 선택 사양으로 만들었지 만 제대로 작동하지만 실제로 라디오 버튼을 사용하여 양식을 제출하면 그 값은 None으로 유지됩니다.

일부 코드를 말하다. 다음과 같이 두 개의 관련 양식 필드가 정의되어 있습니다

construction_year = IntegerField('construction_year') 
transfer_tax_rate = SelectField('transfer_tax_rate', validators=[Optional()], choices=[('ZERO', '0%'), ('SIX', '6%')]) 

내가 먼저 다음과 같이 construction_year 및 transfer_tax_rate이 표시 템플릿에 사용되는 코드 : 이것은 잘 작동

{{ form.construction_year(size=10) }} 
{{ form.transfer_tax_rate() }} 

; 그래서 같은 백 엔드에 값을 출력 할 수 있습니다 :

if form.validate_on_submit(): 
    print form.construction_year.data # prints out '2012' 
    print form.transfer_tax_rate.data # prints out ZERO or SIX depending on my choice 

그때 {{ form.transfer_tax_rate() }}을 제거하고 construction_year 2012 인 경우 일부 HTML을 삽입하는 일부 자바 스크립트 작성 : 쉽게 읽을 수

function displayTransferTaxRate(){ 
    var year = $("#construction_year").val(); 
    var propertyType = $("#property_type").val(); 
    if (year.length == 4 && year == 2012) { 
     var transferTaxRateHtml = 'Applicable tax rate <select id="transfer_tax_rate" name="transfer_tax_rate"><option value="ZERO">0%</option><option value="SIX">6%</option></select>'; 
     $('#transfer-tax-rate-div').html(transferTaxRateHtml); 
    } else { 
     $('#transfer-tax-rate-div').html(''); 
    } 
} 
$("#construction_year").on('keyup paste', displayTransferTaxRate); 

을; 삽입하는 html은 다음과 같습니다.

<select id="transfer_tax_rate" name="transfer_tax_rate"> 
    <option value="ZERO">0%</option> 
    <option value="SIX">6%</option> 
</select> 

html이 잘 삽입되고 옵션 중 하나를 선택할 수 있습니다. 내가 양식을 제출하고 다음과 같이 transfer_tax_rate의 값을 취득하려고 할 때, 그것은 항상 None를 출력 :

if form.validate_on_submit(): 
    print form.construction_year.data # prints out '2012' 
    print form.transfer_tax_rate.data # prints out None 

사람이 내가 잘못 여기서 뭘하는지 어떤 생각을 가지고 있습니까? 모든 팁을 환영합니다!

[편집] 내가 표준 플라스크 request.form에서 점점 시도 끄트머리,하지만 그 중 하나 'transfer_tax_rate'에 대한 항목을 포함하지 않습니다 아래 user3147268에서 팁을 따라.

Answer 1

좋아, 벽에 머리를 두드린 약 5 시간이 지난 후에, 내 자신의 질문에 답할 것이다. 왜냐하면 너희들이 이것을 알 수 없었기 때문이다.

이 양식이 삽입 된 표와 관련이 있음이 밝혀졌습니다. 필자는 그 정보가 관련성이 있다고 기대하지 않았기 때문에 그 정보를 남겼다.

<table> 
    <form action="" method="post" id="prop-form"> 
     {{ form.hidden_tag() }} 
     <tr> 
      <td>Construction year: </td> 
      <td> 
       {{ form.construction_year(size=10) }} 
      </td> 
     </tr> 
     <tr> 
      <td>Transfer tax rate: </td> 
      <td> 
       {{ form.transfer_tax_rate() 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><input type="submit" value="Save property"></td> 
     </tr> 
    </form> 
</table> 

을하지만이 사업부에서 동일한 HTML을 추가 할 때, 그것은 더 이상 작동하지 않습니다 :

그래서이 작품을 잘 반면

<table> 
    <form action="" method="post" id="prop-form"> 
     {{ form.hidden_tag() }} 
     <tr> 
      <td>Construction year: </td> 
      <td> 
       {{ form.construction_year(size=10) }} 
       <div id="transfer-tax-rate-div"></div> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><input type="submit" value="Save property"></td> 
     </tr> 
    </form> 
</table> 

, 주위 테이블없이, 이 솔루션은 밝혀졌다

<form action="" method="post" id="prop-form"> 
{{ form.hidden_tag() }} 
Construction year: {{ form.construction_year(size=10) }} <br /> 
<div id="transfer-tax-rate-div"></div> 
<input type="submit" value="Save property"> 
</form> 

<form> 타의 위치에 거짓말 :이 작업을 수행 나는 코드의 마지막 조각 같은 테이블에서 그들을 이동하는 경우 때문에 GS, 모두 잘 작동합니다 :

<form action="" method="post" id="prop-form"> 
{{ form.hidden_tag() }} 
<table> 
    <tr> 
     <td>Construction year: </td> 
     <td> 
      {{ form.construction_year(size=10) }} 
      <div id="transfer-tax-rate-div"></div> 
     </td> 
    </tr> 
    <tr> 
     <td></td> 
     <td><input type="submit" value="Save property"></td> 
    </tr> 
</table> 
</form> 

모든 관련 정보를 제공하지 않는 동안 모든 너희들과 소녀 시간을 귀찮게에 대한 실례합니다. 나를 계속보고 에너지를 주셔서 감사합니다!