How to insert conditional fields in WTForms?
On the website where I create Flask I am using WTForms to validate the form. I currently have a field that depends on another field: if the user inserts a specific year (2012), a couple of radio buttons are inserted using Javascript. I made a RadioField option that works fine, but if I actually submit the form using radio amateurs, the value will remain None
.
Speak code; the two corresponding form fields are defined as follows:
construction_year = IntegerField('construction_year')
transfer_tax_rate = SelectField('transfer_tax_rate', validators=[Optional()], choices=[('ZERO', '0%'), ('SIX', '6%')])
the code that I first used in the template for display construction_year
and transfer_tax_rate
looks like this:
{{ form.construction_year(size=10) }} {{ form.transfer_tax_rate() }}
This works great; I can print the values at the trailing end like so:
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
Then I removed {{ form.transfer_tax_rate() }}
and wrote some Javascript that inserts some html if construction_year
- 2012:
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);
for ease of reading; html, it inserts the following:
<select id="transfer_tax_rate" name="transfer_tax_rate">
<option value="ZERO">0%</option>
<option value="SIX">6%</option>
</select>
The html is inserted subtly and I can choose any of the options. But when I submit the form and try to get the transfer_tax_rate value like this, it always prints None
:
if form.validate_on_submit():
print form.construction_year.data # prints out '2012'
print form.transfer_tax_rate.data # prints out None
Does anyone know what I am doing wrong here? All advice is appreciated!
[EDIT] Following the hint from user3147268 below, I also tried to get it from the standard jar request.form
, but that doesn't contain an entry for 'transfer_tax_rate'
.
source to share
Okay, after about 5 hours banging my head against the wall, I'll answer my own question because you guys couldn't have known that.
It turns out it has something to do with the table that this form was embedded in. I left this information because I didn't expect it to be relevant.
So this works great:
<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>
But when I add the same html to this div, it doesn't work anymore:
<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>
whereas without a table around it, it works:
<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>
The solution turned out to be in the placement of tags <form>
, because if I output them from the table like this last piece of code, everything works fine:
<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>
Excuse me for bothering everyone who you guys and girls are until you have provided all the information you need. Thank you for giving me the energy to keep watching!
source to share