表单未在回调中提交

Question

I am trying to send an e-mail after an ajax call has been successfully completed. I do not have access to the file that I am making the AJAX call to.

I am preventing the first submit, making the ajax call and submitting the form again upon competition. When doing this, I can't seem to figure out why I have to press the submit button twice for the email to be sent.

Here is my code:

"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';
    });
});

Here is the form 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>

My question is two-fold: Is there a more efficient way to do this? If not, why isn't this working?

Answer 1

You use the wrong approach to Jquery You miss the key : Write Less Do More , the heart of JQuery. Anyway try this:

"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();
    });
});

Last thin.. you CAN'T request a remote page that's not hosted on the same domain of the script.. For that ther's This answer

Answer 2

Just use the .submit directly on the form node (note the [0] )

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

becomes

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

this bypasses the jQuery bound event and forces a postback.