How to catch form submission errors using JavaScript API

Gabriel_Ortiz
Level 2

How to catch form submission errors using JavaScript API

Doesn't anyone know how to catch marketo submission errors using the JavaScript API, when `save2` does not POST?

We are submitting our Marketo forms using the JS API, and are having issues with payload not actually being delivered to Marketo. I've found that the `MktoForms2` object is loading correctly, but in some instances in our production environment, the `submit()` and `onSuccess()` methods are not executing. I've tentatively arrived at the conclusion that there is some kind of error. I can tell the difference because I'm not seeing a POST call to `index.php/leadCapture/save2` in Network. So I want to know why this payload doesn't being delivered!

What's worse is this issue only appears to be happening in our production environment, and not in out staging or dev. So naturally it's baffling that the same code would execute differently.

Here is the model function for submitting in the background:

proto.marketoPayload =  function (marketoPayload) {

return new Promise( (resolve, reject)=>{

//checks to make sure the Payload exists and that there is a marketo form.
// The marketo script will always load, but sometimes here are no actual forms
if( _model.empty( marketoPayload ) || _model.empty( MktoForms2.allForms() ) ){

//define the error message for email
const marketoError = `marketo error, NO PAYLOAD: ${_model.empty( marketoPayload)}, EXECUTION FAILURE: ${_model.empty( MktoForms2.allForms() ) } `;

//send error message from the function
console.log( marketoError );

//update the payload
APIObj.wp_email_subject = "Failed Marketo Submission";
APIObj.error_message = marketoError;
APIObj.wp_email_message = JSON.stringify(APIObj, null, 4);

//send Fail email
var sendEmail = _model.model__handleEmailSubmission(marketoPayload)
.always((response) => {
console.log('marketo fail ', response);

});

//exit this promise
reject();
}

//marketo exists and is working, let's actually deliver the payload
MktoForms2.whenReady( (form )=>{

this.debug( 'Payload Success:', marketoPayload);
this.debug( 'this is the form', form );

form.addHiddenFields(marketoPayload);

form.onSuccess( (vals)=> {

console.log( 'Marketo Success: ', vals );

return false;

});

form.submit();

APIObj.wp_email_message = JSON.stringify(marketoPayload, null, 4);
//send success email
var sendEmail = _model.model__handleEmailSubmission(marketoPayload)
.always((response) => {
console.log('email response ', response);
});

resolve();

} ); //end callback


} ); //end promise


};

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: How to catch form submission errors using JavaScript API

See https://blog.teknkl.com/adding-a-network-server-error-handler-to-marketo-forms/.

Also, the Advanced Editor here has a proper syntax highlighter for JS, please use that.

Gabriel_Ortiz
Level 2

Re: How to catch form submission errors using JavaScript API

Cool! I'm going to give this a run! Thanks!

Do you know of any reasons why `submit()` or `onSuccess()` would not execute? We of course are submitting the marketo form in the background - so the `MktoForms2` script isn't watching for form submissions that isn't it's own, correct? Any info you have would help so much. Thanks!

SanfordWhiteman
Level 10 - Community Moderator

Re: How to catch form submission errors using JavaScript API

Do you know of any reasons why `submit()` or `onSuccess()` would not execute?

There's no prevailing reason other than tracking protection plugins/features, which will block submission if they list *.marketo.com.

o the `MktoForms2` script isn't watching for form submissions that isn't it's own, correct?

Only its own forms, certainly.