javascript - 表单不提交回调

Question

我正在尝试在成功完成 ajax 调用后发送电子邮件。我无权访问我正在进行 AJAX 调用的文件。

我正在阻止第一次提交，进行 ajax 调用并在竞争时再次提交表单。执行此操作时，我似乎无法弄清楚为什么必须按两次提交按钮才能发送电子邮件。

这是我的代码:

"use strict";
var submitted = '';

/* Send info to the portal */
jQuery(function($) {
    $('#quote').submit(function(e){
        var firstName   = $('#firstName').val(),
            lastName    = $('#lastName').val(),
            email       = $('#email').val(),
            phone       = $('#primaryPhone').val(),
            weight      = $('#weight').val(),
            origin      = $('#originPostalCode').val(),
            destination = $('#destinationPostalCode').val(),
            notes       = $('#whatsTransported').val()
        if( submitted != 1 )
        {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "https://somewhere.on/the/internet.php",
                crossDomain: true,
                dataType: "json",
                data: {"key": "my secret key","first": firstName, "last": lastName, "email": email, "phone": phone, "weight": weight, "origin_postal": origin, "dest_country": destination, "note": notes }
            })
            .done(function(data){
                if(data[1][0][0] == 2)
                {
                    $('.alert').append( data[1][0][1].message ).addClass('alert-error').show();
                } else if(data[1][0][0] == 0) {
                    console.log("Made it.");
                    $('#quote #submit').submit();
                } else {
                    $('.alert').append( "Appologies, it seems like something went wrong. Please, <strong>call (877) 419-5523</strong> for immediate assistance or a free quote.");
                }
            })
            .fail(function(data) { console.log(data); });
        }
        submitted = '1';
    });
});

这是表单 HTML

<form action="<?php echo bloginfo($show='template_url').'/includes/form-email.php'; ?>" class="span6 offset1" id="quote" method="post">
            <div class="row formRow">
                <div class="firstName span3">
                    <label for="firstName"><?php _e('First Name:','StreamlinedService'); ?></label>
                    <input type="text" name="firstName" id="firstName">
                </div>
                <div class="lastName span3">
                    <label for="lastName"><?php _e('Last Name:','StreamlinedService'); ?></label>
                    <input type="text" name="lastName" id="lastName">
                </div>
            </div>
            <div class="row formRow">
                <div class="email span3">
                    <label for="email"><?php _e('Email Address:','StreamlinedService'); ?></label>
                    <input type="text" name="email" id="email">
                </div>
                <div class="primaryPhone span3">
                    <label for="primaryPhone"><?php _e('Phone Number:','StreamlinedService'); ?></label>
                    <input type="text" name="primaryPhone" id="primaryPhone">
                </div>
            </div>
            <div class="row formRow">
                <div class="weight span2">
                    <label for="weight"><?php _e('Weight (lbs):','StreamlinedService'); ?></label>
                    <input type="text" name="weight" id="weight">
                </div>
            </div>
            <div class="row formRow">
                <div class="originPostalCode span3">
                    <label for="originPostalCode"><?php _e('Origin:','StreamlinedService'); ?></label>
                    <input type="text" name="originPostalCode" id="originPostalCode">
                </div>
                <div class="destinationPostalCode span3">
                    <label for="destinationPostalCode"><?php _e('Destination:','StreamlinedService'); ?></label>
                    <input type="text" name="destinationPostalCode" id="destinationPostalCode">
                </div>
            </div>
            <div class="row">
                <div class="whatsTransported span6">
                    <label for="whatsTransported"><?php _e('What can we help you transport?','StreamlinedService'); ?></label>
                    <textarea name="whatsTransported" id="whatsTransported" rows="5"></textarea>
                </div>
                <input type="hidden" name="formType" value="quote" />
                <input type="hidden" name="siteReferer" value="<?php echo $blog_id ?>">
                <input type="submit" id="submit" name="submit" value="<?php _e('Get Freight Quote','StreamlinedService') ?>" class="btn btn-primary btn-large span3 offset3" style="float:right;">
            </div>
        </form>

我的问题有两个:有没有更有效的方法来做到这一点？如果没有，为什么这不起作用？

Answer 1

只需在表单节点上直接使用.submit(注意[0])

$('#quote #submit').submit();

成为

$('#quote')[0].submit();

这会绕过 jQuery 绑定(bind)事件并强制回发。