how to submit form and stop submit form based on ajax response

Question

I am using form with onsubmit tag. And in onsubmit function i will call ajax and i will return true in success function and false in error section. But always form has been submitted.

html

<form action="/" method="post" onsubmit="return formsubmit()">

script

function formsubmit() {
"use strict";
var isBasic = $(".test").val() //this is hidden element
if (isBasic === "true") {      
    return true;
}
if (isBasic === "false") {      
        $.ajax({
            type: "post",
            url: "/",
            data: "sample",
            success: function (data) {
                if (data.success) {
                    return true;
                }
                if (!data.success) {                      
                    return false;
                }
            },
            error: function () {

            }
        });
    }
}

}

this doesnt work for me. always form submitted. Please help me to resolve this.

Just use `url: "/", data: "sample",async:true` though it is a bad approach, as it would halt the page — Abhisek Malakar, Apr 07 '17 at 12:50
@AbhisekMalakar you probably meant `async:false` which is bad advise (as you, yourself assert) — freedomn-m, Apr 07 '17 at 12:57
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Apr 07 '17 at 12:58
Return false from `formsubmit()` in all cases, then, in your ajax response, call `$("#form").submit()` instead of return true; — freedomn-m, Apr 07 '17 at 12:59

score 2 · Answer 1 · answered Apr 07 '17 at 12:55

You are correct in desiring a return value from your "formsubmit" function, but you can't return from an async call (the ajax call is async).

Restructure your code to capture a button-click instead of responding to a form submit. In the button click event execute your ajax call, passing a callback function to the ajax call. In the callback function decide whether to submit or not submit your form.

score 0 · Answer 2 · answered Apr 07 '17 at 13:09

change you code like this.

function formsubmit() {
 "use strict";
 var isBasic = $(".test").val(); //this is hidden element

  if (isBasic === "false") {      
      $.ajax({
         type: "post",
         url: "/",
         data: "sample",
         success: function (data) {
            if (data.success) {
                return true;
            }
            if (!data.success) {                      
                return false;
            }
        },
        error: function () {

        }
    });
}else{
  return true;
}
 return false;
}
}

score 0 · Answer 3 · answered Apr 07 '17 at 13:12

function formsubmit() {
    "use strict";
    var isBasic = $(".test").val() //this is hidden element
    if (isBasic === "true") {      
        return true;
    }
    if (isBasic === "false" && !$(this).attr('submit-suggest')) {      
            $.ajax({
                type: "post",
                url: "/",
                data: "sample",
                success: function (data) {
                    if (data.success) {
                        $(this).attr('submit-suggest',1);
                        $(this).submit();
                    }
                    if (!data.success) {                      
                        $(this).attr('submit-suggest',0);
                    }
                },
                error: function () {
                    $(this).attr('submit-suggest',0);
                }
            });
        return false;
    }
    return true;
}

how to submit form and stop submit form based on ajax response

3 Answers3