ajax request inside fd.onsubmit() not working

[Alex]

Hi,
I have an async request inside of an fd.onsubmit() function. Issue is that Mozilla based browsers (e.g. Firefox) are transmitting the form before the ajax response...
here is my example code

Code: Select all

fd.onsubmit(function (postURL,data) {
    jQuery.ajax({
        url: postURL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function(){
	console.log("ok");           
        }
    });
    
   return true;
}); 
    

Do you have an idea how to handle it?

br, Alex

[Nikita Kurguzov]

Dear Alex,
Yes, that's what is expected to happen. You can either execute Async requests outside of onsubmit() event, or do it inside, but return false, and then activate fd.save().click() again, after the request is successfully resolved, and this time return true (after checking for the appropriate condition that the request has been executed).

[Alex]

you mean like this ?:

Code: Select all

fd.onsubmit(function (postURL,data) {
    jQuery.ajax({
        url: postURL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function(){
	console.log("ok");    
	fd.save().click();       
        }
    });
    
   return false;
}); 

[Nikita Kurguzov]

Dear Alex,
Yes, try it like this:

Code: Select all

var success = false;

fd.onsubmit(function (postURL,data) {
    jQuery.ajax({
        url: postURL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function(){
	console.log("ok");  
	success = true;  
	fd.save().click();       
        }
    });
    
    if (success)
      return true;
    
   return false;
});

 

This should work, but if it doesn't - let me know!

[Alex]

Hi Nikita,
thank you, it works. But the request is always being sent twice.
I guess the first click is the manual one and the second happens over fd.save().click();
How this could be handled?
br, Alex

[Alex]

I think, I got it with

Code: Select all

var success = false;

fd.onsubmit(function (postURL,data) {
if(!success){
    jQuery.ajax({
        url: postURL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function(){
	console.log("ok");  
	success = true;  
	fd.save().click();       
        }
    });
 }   
    if (success)
      return true;
    
   return false;
});

br, Alex