Submitting Forms via Ajax

[dawidvdh]

Hi jumale, I am trying to submit forms via jquery ajax but your script seems to force sending them by reloading the page? Any Help would be Great!

[MatissJanis]

I've been having the same issue. No luck fixing it so far.

[dawidvdh]

I have found a way, possibly very very inefficient.. but it works for now. So Heres what i do in another js file:

FpJsFormValidator.customizeMethods.submitForm = function (event) {
        var targetForm = $(this);
        FpJsFormValidator.each(this, function (item) {
            var element = item.jsFormValidator;
            if (event) {
                event.preventDefault();
            }
            element.validateRecursively();
            if (FpJsFormValidator.ajax.queue) {
                if (event) {
                    event.preventDefault();
                }
                FpJsFormValidator.ajax.callbacks.push(function () {
                    element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]);
                    if (element.isValid()) {
                        sendAjax(targetForm); //Submit Form Via AJAX
                    }
                });
            } else {
                element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]);
                if (element.isValid()) {
                    sendAjax(targetForm); //Submit Form Via AJAX
                }
            }
        });
    };

As you can see i am basically copying his entire function and just replacing his submit function with my own ajax ready function.. Messy i know but i hope it helps

[manuelj555]

Proposal (Edited)

Create a FpJsFormElement.submitForm function:

this.submitForm = function (form) {
    form.submit();
};

And change the FpJsCustomizeMethods.submitForm for:

this.submitForm = function (event) {
    //noinspection JSCheckFunctionSignatures
    FpJsFormValidator.each(this, function (item) {
        var element = item.jsFormValidator;
        if (event) {
            event.preventDefault();
        }
        element.validateRecursively();
        if (FpJsFormValidator.ajax.queue) {
            if (event) {
                event.preventDefault();
            }
            FpJsFormValidator.ajax.callbacks.push(function () {
                element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]);
                if (element.isValid()) {
                    element.submitForm.apply(item, [item]); // Call to Method
                }
            });
        } else {
            element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]);
            if (element.isValid()) {
                element.submitForm.apply(item, [item]); // Call to Method
            }
        }
    });
};

This change make possible:

$('form#my-form').jsFormValidator({
    submitForm: function () {
        sendAjax($(this));
    }
});

[manuelj555]

Ping @jumale

[66Ton99]

@manuelj555 can you create PR with it?

[manuelj555]

Sure https://github.com/formapro/JsFormValidatorBundle/pull/84