AJAX call in jQuery form submit function

Question

I'm using ASP.NET MVC. So I have a form on my page:

<form id="MyForm" name="MyForm" method="post" action="http://www.mysite.com">
    <input id="hdnType" name="hdnType" type="hidden" />
</form>

I'm using the jQuery submit action to do some validation before the form is posted. I also need to make an AJAX call to set "hdnType" based on other values from several dropdowns that I didn't include in this example:

$('#MyForm').submit(function()
{
    if (!ValidForm())
        return false;

    $.ajax({
        type: "POST",
        url: '/Home/GetType',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response)
        {
            $('#hdnType').val(response);
        }
    });

    return true;
}

Everything in the submit() function is supposed to run before the form posts. This was working correctly before I added that AJAX call, but now when the code reaches my AJAX call, the form posts before I can set "hdnType".

Is there a way around this?

Andrey · Accepted Answer · 2010-10-05 18:30:26Z

3

The ajax call has a parameter async. By default it is true. This causes execution to not be held and the function to complete. Try changing it to

$.ajax({
    async:false,
    type: "POST",
    url: '/Home/GetType',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response)
    {
        $('#hdnType').val(response);
    }
});

This may be a poor practice as it will freeze the browser until it is done. Consider using an asyc call back function as Dave suggests

answered Oct 5, 2010 at 18:30

Andrey

1,24712 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steven Over a year ago

Nice, I didn't know I could do that. Thanks.

Dave Swersky · Accepted Answer · 2010-10-05 18:25:23Z

1

The success function is called asynchronously, after the ajax call gets a response. If you want to set hdnType before the form is posted you'd have to move that call outside the $.ajax call. It looks like you need to get the result for hdnType from your POST action first, in a separate function, then call submit on the form.

answered Oct 5, 2010 at 18:25

Dave Swersky

34.8k9 gold badges83 silver badges120 bronze badges

Collectives™ on Stack Overflow

AJAX call in jQuery form submit function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related