form submit before ajax request completes

Question

i am newbie to jquery.I called a ajax when submit the form.But form submits before ajax complete the request.How to fix this issue? Below is my code

  $("#formSearch").submit(
                            function() {
                                if (checkUserNumber($("#UserNumber").val())) {
                                    $.ajax({
                                        type : 'post',
                                        url : 'CheckDetails.do',
                                        data : {
                                            userNumber:$("#UserNumber").val()
                                        },

                                        success : function(data) {

                                            if (data == 'EI') {
                                                $("#ErrMsg").text(
                                                        'User Number does not exist');
return false;
                                            } else {

                                                return true;
                                            }

                                        }
                                    });

                                } else {

                                    return false;
                                }

                            });

Any help will be greatly appreciated!!!

I don`t know if this work, but what if you do the AJAX with async false? try add async: false . This might help you : http://stackoverflow.com/questions/16415740/jquery-resume-form-submit-after-ajax-call — patricmj, Jul 15 '15 at 14:20

score 2 · Answer 1 · answered Jul 15 '15 at 14:00

2

use event.preventDefault(); to prevent the form submission.

$("#formSearch").submit(
      function(event) {
            event.preventDefault();
            ...
            ...
            ....
  });

answered Jul 15 '15 at 14:00

man_luck

1,605
2
20
39

if ajax request success i have to submit the form.if i give event.preventDefault(); i can't able to submit the form – Selva Jul 15 '15 at 14:05
you can submit the form but I doubt that the handler would be called again. see the link http://hayageek.com/jquery-ajax-form-submit/ – man_luck Jul 15 '15 at 14:38
As @man_luck points out, use prevent default to stop the submit and then you can use jQuery `.submit()` to send the request. – Paul Redmond Jul 15 '15 at 15:52

score 0 · Answer 2 · answered Jul 15 '15 at 14:36

You can apply trick to achieve your requirement, add a data attribute to target form as follows

<form id="formSearch" data-prevent-default="1">

set default value to data-prevent-attribute=1 than you can rewrite your jquery submit function as follows:

$("#formSearch").submit(function (e) {
    if ($(this).data("prevent-default") === 1) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'CheckDetails.do',
            data: {
                userNumber: $("#UserNumber").val()
            },

            success: function (data) {
                //on success change the value of data attribute to 0
                $("#formSearch").data("prevent-default", "0");
                $("#formSearch").submit(); //than call form submit again
            }
        }).fail(function () {

        });
    }
    //otherwise it will submitted by default
});

form submit before ajax request completes

2 Answers2