Prevent AJAX form from submitting twice?

Question

I can't figure out why this AJAX form is processing and sending out an email twice. Is there some sort of obvious hickup in the code you can see causing this to occur?

HTML

<form class="submit-form" method="post">
<input type="url" class="content-link" name="content_link" placeholder="Link" />
<input type="email" class="email" name="email" placeholder="Your Email Address" />
<button class="submit-modal-button submit-button"><span>Send<span class="ss-icon">send</span></span></button>
<p class="terms">By clicking Submit you agree to our&nbsp;<a href="<?php echo home_url('terms-of-use'); ?>">Terms & Conditions</a></p>
</form>

JavaScript

    processSubmitModal : function () {
    var form = $('.submit-form'),
        content_link = $('.submit-form input[type="url"]'),
        email = $('.submit-form input[type="email"]'),
        viewport_size = $(window).width() + "x" + $(window).height(),
        user_browser = BrowserDetect.browser,
        user_os = BrowserDetect.OS,
        current_page = document.location.href;

    $('.submit-form input[type="url"],.submit-form input[type="email"]').blur(function () {
        if ($.trim($(this).val()) == '') {
            $(this).addClass('form-validation-error');
            return false;
        } else {
            $(this).removeClass('form-validation-error');
        }
    });

    form.submit(function () {
        if ($.trim(content_link.val()) == '' && $.trim(email.val()) == '') {
            content_link.addClass('form-validation-error');
            email.addClass('form-validation-error');
            return false;
        }
        else if ($.trim(content_link.val()) == '') {
            content_link.addClass('form-validation-error');
            return false;
        }
        else if ($.trim(email.val()) == '') {
            email.addClass('form-validation-error');
            return false;
        } else {
            var env = TTB.getEnvironment();

            $('.submit-modal-button').attr('disabled','disabled');
            $(document).ajaxStart(function () {
                $('.submit-modal .screen-1').delay(300).append('<span class="loading2"></span>');
            });
            $.ajax({
                url: env.submit_modal_process,                      
                type: 'POST',
                data: {
                    content_link: content_link.val(),
                    email: email.val(),
                    viewportsize: viewport_size,
                    browser: user_browser,
                    os: user_os,
                    current_page: current_page
                }, 
                success: function () {
                    $('.submit-modal .screen-1').delay(1000).fadeOut(300, function () { 
                        $('.submit-modal .screen-1').fadeOut(500, function () {
                            $('span.loading2').detach();

                            $('.submit-modal .screen-2').fadeIn(500, function () {
                                $('.submit-modal .screen-2').append('<img class="carlton" src=' + env.the_environment + TTB.config.image_path() + 'submit-modal-success.gif' + ' />');  
                            });

                            $('.submit-modal .screen-2').css('display','block').delay(4200).fadeOut(500, function () {
                                $('.carlton').hide();
                                $('.submit-modal .screen-1').fadeIn(500);   
                                content_link.val('');
                                email.val('');
                                content_link.focus();
                                email.removeClass('form-validation-error');
                                $('.submit-modal-button').removeAttr('disabled');
                            });
                        }); 
                    });                  
                }
            });
        return false;
        }
    });
}
   EXAMPLE.processSubmitModal();

Your code snippet is syntactically incorrect: `window.EXAMPLE` should be an array or it should be some key before `form.submit(...)`. If `form.submit(...)` is the only element in array/object than remove trailing comma - it will cause an error in some/all browsers. — Vadim, May 05 '13 at 01:30
@Vadim - I updated and reformatted my code. I basically create key/value JS modules to organize and provide a little more structure to my code. Nonetheless, if you can put aside how I architected the modules (as they do work) and focus more on why the form submits twice, that's what I'm looking for... — Matt, May 05 '13 at 14:06
instead of doing `return false` everywhere (and risking to miss a location - although IDEs can detect that), you could `.preventDefault()` once at the beginning instead. — John Dvorak, May 05 '13 at 14:10
Are you positive that the form actually submits twice, or are you just noting that two emails are sent? What happens if you post a request to the server with e.g. curl? — Tomas Aschan, May 05 '13 at 14:46
@TomasLycken - two emails are being sent and when I console.log('test') in the ajax success I see (2) test in Chrome Inspector — Matt, May 06 '13 at 01:30

score 1 · Answer 1 · answered May 05 '13 at 14:37

1

Try like this

form.submit(function (event) {

if(event.handled !== true)
  {
//put your ajax code

 event.handled = true;

}
return false;
});

Refernce

answered May 05 '13 at 14:37

Gopesh

3,882
11
37
52

Snippet you provided and reference article is the workaround for `.live()` and add no value for `.submit()`. Besides, it does not explain why event is handled twice. – Vadim May 06 '13 at 06:51

Vadim · Accepted Answer · 2013-05-06T06:40:35.780

If to remove all non relevant to the issue code from your snippets we will get the following:

HTML

<form class="submit-form" method="post">
    <input type="url" name="content_link" />
    <input type="email" name="email" />
    <button>Send</button>
</form>

JavaScript

$(function() {
    var EXAMPLE = {
        processSubmitModal : function () {
            var form = $('.submit-form'),
                content_link = $('.submit-form input[type="url"]'),
                email = $('.submit-form input[type="email"]');

            form.submit(function () {
                $.ajax({
                    url: document.location.href,
                    type: 'POST',
                    data: {
                        content_link: content_link.val(),
                        email: email.val()
                    },
                    success: function () { // <-- The function that is executed twice
                        // Do something
                    }
                });
                return false;
            });
        }
    };
    EXAMPLE.processSubmitModal();

    // And somewhere in the code that was not presented in snippet...
    EXAMPLE.processSubmitModal();
});

I played around with your snippet and it always performs only one AJAX call and process email once except the only case - when somewhere in the code you call EXAMPLE.processSubmitModal() once again. Search in your code, I'm almost sure it is the reason. Pay attention that each time you call EXAMPLE.processSubmitModal() you add one another handler to submit event of the form and not override it.

You are correct! For some reason I had an additional call to EXAMPLE.processSubmitModal(); very strange..Thanks! — Matt, May 08 '13 at 04:14

Prevent AJAX form from submitting twice?

2 Answers2

Linked