title: How to insert conditional fields with WTForms?
body: <p>In a website I'm building with <a href="http://flask.pocoo.org/" rel="nofollow">Flask</a> I'm using <a href="http://wtforms.readthedocs.org/en/latest/" rel="nofollow">WTForms</a> for form validation. I currently have a field which is dependent on another field: if a user inserts a specific year (2012) a couple radio buttons are inserted using Javascript. I made the RadioField optional, which works fine, but if I actually do submit the form with the radiobuttons the value of it remains <code>None</code>.</p>
  
  <p>To talk some code; the two relevant form fields are defined as follows:</p>
  
  <pre><code>construction_year = IntegerField('construction_year')
  transfer_tax_rate = SelectField('transfer_tax_rate', validators=[Optional()], choices=[('ZERO', '0%'), ('SIX', '6%')])
  </code></pre>
  
  <p>the code I first used in the template to display the <code>construction_year</code> and <code>transfer_tax_rate</code> is as follows:</p>
  
  <pre><code>{{ form.construction_year(size=10) }}
  {{ form.transfer_tax_rate() }}
  </code></pre>
  
  <p>This works fine; I can print out the values on the back end like so:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I then removed <code>{{ form.transfer_tax_rate() }}</code> and wrote some Javascript which inserts the some html if the <code>construction_year</code> is 2012:</p>
  
  <pre><code>function displayTransferTaxRate(){
      var year = $("#construction_year").val();
      var propertyType = $("#property_type").val();
      if (year.length == 4 &amp;&amp; year == 2012) {
          var transferTaxRateHtml = 'Applicable tax rate &lt;select id="transfer_tax_rate" name="transfer_tax_rate"&gt;&lt;option value="ZERO"&gt;0%&lt;/option&gt;&lt;option value="SIX"&gt;6%&lt;/option&gt;&lt;/select&gt;';
          $('#transfer-tax-rate-div').html(transferTaxRateHtml);
      } else {
          $('#transfer-tax-rate-div').html('');
      }
  }
  $("#construction_year").on('keyup paste', displayTransferTaxRate);
  </code></pre>
  
  <p>for easy reading; the html it inserts is as follows:</p>
  
  <pre><code>&lt;select id="transfer_tax_rate" name="transfer_tax_rate"&gt;
      &lt;option value="ZERO"&gt;0%&lt;/option&gt;
      &lt;option value="SIX"&gt;6%&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The html gets inserted fine, and I can select either of the options. But when I submit the form and try to get the value of the transfer_tax_rate as follows, it always prints out <code>None</code>:</p>
  
  <pre><code>if form.validate_on_submit():
      print form.construction_year.data  # prints out '2012'
      print form.transfer_tax_rate.data  # prints out None
  </code></pre>
  
  <p>Does anybody have any idea what I'm doing wrong here? All tips are welcome!</p>
  
  <p>[EDIT]
  Following the tip from user3147268 below I aslo tried getting it from the standard flask <code>request.form</code>, but that doesn't contain an entry for <code>'transfer_tax_rate'</code> either.</p>