How to prevent Ajax page refresh within a button click event?

Question

Overview:

I've set up an Ajax POST method inside a JQuery button click event. This implementation worked fine and didn't refresh the page by specifying evt.preventDefault();. But now I added a call to the form submit $createForm.submit(); within the button click event. (In order to trigger validation on the page before submitting via Ajax.)

Issue:

The problem with adding this call is that the page now refreshes again after the page is validated and I click the submit button.

I did do a search on the issue and adding return false; to the end of the button click event as suggested here doesn't prevent the page refresh.

Question: How can I prevent Ajax page refresh within a button click event?

Html for the buttons contained within a dropdown button:

                                               <div class="btn-group dropup">
                                                    <button type="submit" class="btn btn-success dropdown-toggle"  style="background-color: #0CA281;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        SUBMIT <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li id="submitAndEmailBtn"><a>Submit + Email</a></li>
                                                        <li role="separator" class="divider"></li>
                                                        <li id="submitBtn"><a>Submit Only</a></li>
                                                    </ul>
                                                </div>

The Ajax call within the submitAndEmailBtn click event:

    //Ajax POST method fired on submitAndEmailBtn li button click
    $('#submitAndEmailBtn').click(function(evt) 
    { 
        //call to prevent default refresh
        evt.preventDefault();

        //call submit on the form to run validation
        //before running the Ajax call.
        $createForm.submit();

        //swal dialog to confirm or cancel Ajax call
        swal({
            title: "Submit & Email",
            text: "Are you sure?",
            type: "warning",
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: true,
        }, function () {
            $.ajax({
                url: "@(Url.Action("EmailAndSubmit", "CreateEsc"))",
                type: 'POST',
            traditional: true,
            data: $("#createForm").serialize(),
            dataType: "json",
            success: function (result) {
                if (result.Success) {
                    swal("Emailed and Submitted!");
                    window.location.href = result.redirectUrl;
                }
                else {
                    $('#submitStatus').text("Error occurred while processing your request");
                    $(this).addClass('alert alert-danger fade in');
                    $('#submitStatus').show();

                }
            },
            //catches any HTTP error after AJAX method return 
            error: function (jqXHR, exception) {
                var msg = '';
                if (jqXHR.status === 0) {
                    msg = 'Not connect.\n Verify Network.';
                } else if (jqXHR.status == 404) {
                    msg = 'Requested page not found. [404]';
                } else if (jqXHR.status == 500) {
                    msg = 'Internal Server Error [500].';
                } else if (exception === 'parsererror') {
                    msg = 'Requested JSON parse failed.';
                } else if (exception === 'timeout') {
                    msg = 'Time out error.';
                } else if (exception === 'abort') {
                    msg = 'Ajax request aborted.';
                } else {
                    msg = 'Uncaught Error.\n' + jqXHR.responseText;
                }
                $('#submitStatus').text("Error occurred while processing your request. Detail: " + msg);
                $(this).addClass('alert alert-danger fade in');
                $('#submitStatus').show();
            },
            });
        });

        return false;

    });

Answer 1

Even though this is old, it was never answered. Try replacing type=submit with type=button.

<button type="button" class="btn btn-success dropdown-toggle"  style="background-color: #0CA281;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    SUBMIT <span class="caret"></span>
</button>

Answer 2

Try replacing $myForm.submit() with $myForm.find(':submit').click()

Given by @Abraham on this thread