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

你对Jquery使用了错误的方法你错过了关键：写得更少，这是JQuery的核心。无论如何试试这个：

"use strict";
/* Send info to the portal */
jQuery(function($) {
    $('#quote').submit(function(e){
         var tis = $(this);
         $.ajax({
                type: "POST",
                url: "https://somewhere.on/the/internet.php",
                cache: true,
                dataType: "json",
                data: tis.serialize(),
                success: 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.");
                }
                },
                error: function(data){console.log(data);}
            });
         e.stroPropagation();
         e.preventDefault();
    });
});

上次瘦...你不能请求一个远程页面没有托管在脚本的同一个域上..对于那个This answer

Answer 2

直接在表单节点上使用.submit（请注意[0]）

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

变为

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

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

表单不会在回调时提交

2 个答案: