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.
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.
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;
}
}
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;
}