I have a form with a checkbox on a webpage pop-up modal using flask/bootstrap/jquery. I want to post the form without a page refresh, so I'm using jquery.ajax. The form works fine and my flask app receives all the data fields it's supposed to except the checkbox value doesn't change no matter what I've tried.
I fully understand that with an HTML post request, if a checkbox is unchecked it doesn't appear in the payload at all, and that you can tell it's been checked by testing for its presence. But apparently that's not the behavior with an ajax post, because it sends the checkbox value every time, checked or not, and it doesn't change from one state to the other, checked or unchecked.
Here's code snips: (flask) forms.py
class ContactForm(FlaskForm):
first_name = StringField('First Name', validators = [InputRequired()])
last_name = StringField('Last Name', validators = [InputRequired()])
company = StringField('Company/Organization')
cell_number = StringField('Cell No')
email = StringField('Your Email', validators = [Email()])
opt_in = BooleanField()
form_message = TextAreaField('Message', validators = [InputRequired()])
submit = SubmitField('Send')
(html) index.html
<form action="" method="post">
<p class="text-white">
  
<br><br>
  
<br><br>
I want to receive a bi-weekly "Website Tips & Tricks" email newsletter<br>
 (if you want a text-message reply) <br><br>
<br><br>
   <input type="reset" value="Reset"><br>
</p>
</form>
(embedded javascript)
<script type="text/javascript">
$(document).ready(function() {
$('form').on('submit', function(event) {
var option = 'n'
if ($('#opt_in').is(":checked"))
{
option = 'y';
} else
{ option = 'n';
}
$.ajax({
data : {
first_name : $('#first_name').val(),
last_name : $('#last_name').val(),
company : $('#company').val(),
email : $('#email').val(),
opt_in : $('option'), // $('#opt_in').val(),
cell_number : $('#cell_number').val(),
form_message : $('#form_message').val()
},
type : 'POST',
url : '/contactform'
})
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
}
else {
$('#successAlert').text(data.name).show();
$('#errorAlert').hide();
}
});
event.preventDefault();
});
});
</script>
(flask) routes.py
@app.route('/contactform', methods=['POST'])
def contactform():
first_name = request.form['first_name']
last_name = request.form['last_name']
company = request.form['company']
email = request.form['email']
permission = request.form['opt_in']
cell_number = request.form['cell_number']
form_message = request.form['form_message']
email_body = (f"<html><body>A new contact-form submission has arrived:<br><br>"
f"First name: {first_name}<br>"
f"Last name: {last_name}<br>"
f"Company: {company}<br><br>"
f"Email: {email}<br>"
f"Opt-in: {permission}<br><br>"
f"Cell number: {cell_number}<br><br>"
f"Message: {form_message}<br>"
f"Form list: {str(request.form)}"
f"</body></html>")
You'll see the if/else at the top of the JS snippet. That's my latest of several attempts to hack out a solution. In the "/contactform" endpoint from routes.py, you'll also note I'm printing out the contents of the "request.form" object to see what flask is actually receiving from the ajax post.
Since the form works properly in every way other than the checkbox state, there's some little thing I'm missing. Does anyone know what it could be?
Aucun commentaire:
Enregistrer un commentaire