I've looked around and none of the other similar posts have helped me. I have built an AJAx based form in Yii 2 and jQuery and it seems it submits the form twice.

My form:

$form = ActiveForm::begin([
    'id' => 'pany_form',
    'ajaxDataType' => 'json',
    'ajaxParam' => 'ajax',
    'enableClientValidation' => false
]);

My JS code:

$(document).ready(function() {

    /* Processes the pany signup request */

    $('#pany_form').submit(function() {
        signup('pany');
        return false;
    }); 

})

function signup(type) {

    var url;

    // Set file to get results from..

    switch (type) {
        case 'pany':
            url = '/site/pany-signup';
            break;
        case 'client':
            url = '/site/client-signup';
            break;
    }

    // Set parameters
    var dataObject = $('#pany_form').serialize();

    // Run request  

    getAjaxData(url, dataObject, 'POST', 'json')

        .done(function(response) {

            //.........

        })

        .fail(function() {
            //.....
        });

    // End

}

Shouldn't the standard submit be stopped by me putting the return: false; in the javascript code?

Why is it submitting twice?

More Info: However the strange thing is, that only appears to happen the first time; if I hit submit again it only submits once; but if I reload the page and hit submit it will do it twice again.

I've looked around and none of the other similar posts have helped me. I have built an AJAx based form in Yii 2 and jQuery and it seems it submits the form twice.

My form:

$form = ActiveForm::begin([
    'id' => 'pany_form',
    'ajaxDataType' => 'json',
    'ajaxParam' => 'ajax',
    'enableClientValidation' => false
]);

My JS code:

$(document).ready(function() {

    /* Processes the pany signup request */

    $('#pany_form').submit(function() {
        signup('pany');
        return false;
    }); 

})

function signup(type) {

    var url;

    // Set file to get results from..

    switch (type) {
        case 'pany':
            url = '/site/pany-signup';
            break;
        case 'client':
            url = '/site/client-signup';
            break;
    }

    // Set parameters
    var dataObject = $('#pany_form').serialize();

    // Run request  

    getAjaxData(url, dataObject, 'POST', 'json')

        .done(function(response) {

            //.........

        })

        .fail(function() {
            //.....
        });

    // End

}

Shouldn't the standard submit be stopped by me putting the return: false; in the javascript code?

Why is it submitting twice?

More Info: However the strange thing is, that only appears to happen the first time; if I hit submit again it only submits once; but if I reload the page and hit submit it will do it twice again.

• javascript
• php
• ajax
• yii
• yii2

• Does it send ajax request twice in firebug? – Ali MasudianPour Commented Nov 27, 2014 at 17:55
• 1 @AliMasudianPour Yes, when I watch the console the request is sent twice. However the strange thing is, that only appears to happen the first time; if I hit submit again it only submits once; but if I reload the page and hit submit it will do it twice again. – Brett Commented Nov 27, 2014 at 17:57

2 Answers 2

You may need to change your code like below:

$('#pany_form').submit(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    signup('pany');
    return false;
}); 

http://api.jquery./event.stoppropagation/

http://api.jquery./event.stopimmediatepropagation/

Solution mon

Next JS will works with any state of 'enableClientValidation':

$('#pany_form').on('beforeSubmit', function (e) {
    signup('pany');
    return false;
}); 

https://yii2-cookbook.readthedocs.io/forms-activeform-js/#using-events