Search code examples
javascriptjquerysubmitajaxform

ajaxForm and submit() redirect issues

I have a weird situation where I need to use ajaxForm to create an entry in the CRM I'm using. I need to prevent the form from redirecting the user off the page so I can continue to run other scripts.

When I hit the submit button manually, the form returns an (expected) error. The entry is created and the error is due to the target page not returning anything. This is what I'm trying to achieve without having to hit the submit button.

When I use the jQuery to submit the form, it redirects. My code is below:

For the ajaxForm:

$(document).ready(function() { 
    $('#the-form').ajaxForm({
        error: function(response) {
            console.log(response);
        },
    });
});

For the Submit:

function submit_form() {
    jQuery('#the-form').submit();
};

I tried using ajax and serialize but the entry doesn't go through on the CRM. Thank you you all ahead of time!

Solution

  • You need to use jquery preventDefault() function because the default form submit behavior is post with a page reload.

    Documentation: https://api.jquery.com/event.preventdefault/