如何使用 Bootstrap 模态中的 jquery.ajax 发送复选框值？

Question

我在使用 flask/bootstrap/jquery 的网页弹出模式上有一个带有复选框的表单。我想 post 不刷新页面的表单，所以我使用 jquery.ajax。表单工作正常，我的烧瓶应用程序收到了它应该接收的所有数据字段除了无论我尝试了什么，复选框值都没有改变。

我完全理解，对于 HTML post 请求，如果未选中复选框，则它根本不会出现在有效负载中，并且您可以通过测试来判断它已被选中它的存在。但显然这不是 ajax post 的行为，因为它每次都发送复选框值，无论是否选中，并且它不会从一种状态更改为另一种状态，选中或未选中。

这是代码片段：（烧瓶）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">
    {{ form.hidden_tag() }}
    <p class="text-white">
    {{ form.first_name(size=12, placeholder='First name') }}&nbsp&nbsp
    {{ form.last_name(size=16, placeholder='Last name') }} <br><br>
    {{ form.company(size=16, placeholder='Company/Organization') }} &nbsp&nbsp
    {{ form.email(size=20, placeholder='email address') }} <br><br>
    {{ form.opt_in(id='opt_in', type='checkbox') }} I want to receive a bi-weekly "Website Tips & Tricks" email newsletter<br>
    {{ form.cell_number(size=12, placeholder='Cellphone') }} &nbsp(if you want a text-message reply) <br><br>            
    {{ form.form_message(cols=58, rows=6, placeholder='Enter your message') }} <br><br>
    {{ form.submit() }} &nbsp&nbsp <input type="reset" value="Reset"><br>
    </p>  
 </form>

（嵌入式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>

（烧瓶）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>")

您会在 JS 代码段的顶部看到 if/else。这是我最近几次试图找出解决方案的尝试。在 routes.py 的“/contactform”端点中，您还会注意到我正在打印 "request.form" 对象的内容，以查看 flask 实际上从 ajax post.

由于表单在复选框状态以外的所有方面都可以正常工作，因此我缺少一些小东西。有谁知道它可能是什么？

Answer 1

将 event.preventDefault() 移动到提交处理程序的顶部
将opt_in : $('option')更改为opt_in : option

如何使用 Bootstrap 模态中的 jquery.ajax 发送复选框值？

How to send checkbox value using jquery.ajax from Bootstrap modal?

python

ajax

checkbox

jquery

flask-wtforms