\n
function submitForm(){\r\n\tvar isFormValid=false;\r\n\tvar dataToBeSent=$('form').serialize();\r\n\t$.get(url, dataToBeSent, function(result){\r\n\t\tisFormValid=result;\r\n\t})\r\n\tif(isFormValid){\r\n\t\t$('form').submit();\r\n\t}\r\n}<\/pre>\n<\/div>\nThe statement $('form').submit()<\/code> will never be called irrespective of the result<\/code> (AJAX call response). After executing $.get<\/code> statement it will execute the next statement\u00a0 if(isFormValid) <\/code>without waiting for the statement isFormValid=result<\/code> inside the callback function to be executed.<\/p>\nThere exist a dirty solution for the problem : using JavaScript sleep API. But how long you are going to halt the execution of JavaScript code. You are back to the same problem of getting the incorrect behavior.<\/p>\n
One good solution is to make the $.get call synchronous by making changes to the global AJAX configuration like :<\/p>\n
\n
$.ajaxSettings.async=false;<\/pre>\n<\/div>\nor using calls like :<\/p>\n
\n
$.ajax({type: \"GET\", url: url, data: dataToBeSent, success: function(){\r\n\t\tisFormValid=result;\r\n\t}\r\n});<\/pre>\n<\/div>\nNow the if(isFormValid) <\/code>statement will be executed only after the $.ajax <\/code>statement has completed its execution. However this approach has its own drawback. Obvious one is the execution of JavaScript halts until it receives the response.<\/p>\nHowever the better solution\u00a0 is to execute $('form').submit()<\/code> inside the callback function like :<\/p>\n\n
$('submitButton').click(function(){\r\n\tvar isFormValid=false;\r\n\tvar dataToBeSent=$('form').serialize();\r\n\t$.get(url, dataToBeSent, function(result){\r\n\t\tisFormValid=result;\r\n\tif(isFormValid){\r\n\t\t$('form').submit();\r\n\t}\r\n\t})\r\nreturn false; \/\/ Needless if the button is not a submit button\r\n})<\/pre>\n<\/div>\nreturn false<\/code> statement at the end of the function prevents the form from being submitted. Now the form submission code will be executed only after the response to $.get<\/code> statement is true.<\/p>\nThere exist JQuery plugins (e.g. JQuery validation plugin) for doing form validation in a better way where you get support for server side validation also. But the case discussed above was to make you understand the asynchronous behavior of AJAX calls.<\/p>\n
Hope this helps you while using Ajax.\u00a0 \ud83d\ude42<\/p>\n
Cheers,
https:\/\/2thenew.xyz<\/p>\n","protected":false},"excerpt":{"rendered":"
Ajax (shorthand for Asynchronous JavaScript and XML) is used to retrieve data from the server asynchronously without interfering with the display and behavior of the existing page. Forgetting this asynchronous behavior will produce incorrect result if it depends on the response from Ajax call. Lets take an example(I am using JQuery to illustrate the example). […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":7,"footnotes":""},"categories":[1],"tags":[96,410,408,27,409],"class_list":["post-1688","post","type-post","status-publish","format-standard","hentry","category-technology","tag-ajax","tag-ajaxsettings-aync","tag-asynchronous","tag-jquery","tag-synchronous"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t