How to catch form submission errors using JavaScript API | Community
Skip to main content
Gabriel_Ortiz
New Participant
October 24, 2019
Question

How to catch form submission errors using JavaScript API

  • October 24, 2019
  • 1 reply
  • 6172 views

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


};

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
New Participant
October 24, 2019

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
New Participant
October 24, 2019

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
New Participant
October 25, 2019
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.