Add Hidden Field onSubmit

[Pepe_Serralvo]

Hi!

I’m having difficulties setting up a XHR call that gets triggered in the onSubmit event of a form.

After I receive the data back from the POST call, I need to store it in some hidden fields in order to have them saved in the marketo database, the issue is that this data is not being saved.

form.onSubmit(function(){
	var accessToken = "";
	var codeSentback;
	var dataToSend = ' {"firstname": "' + form.vals().FirstName + '","lastname": "' + form.vals().LastName + '"}';
	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'http://test');
	xhr.setRequestHeader('Content-type','application/json');
	xhr.send(dataToSend);
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			var returnedData = JSON.parse(this.responseText);
			form.addHiddenFields({
				assessmentdata: returnedData.data
			});
		}
	};
});

I believe the issue is that by the time I received the data back from the POST call, the form it’s already being sent, so I’m adding the hidden field too late.

I have tested that I receive the data from the POST call ok, so that's not the issue.

How can I maybe stop the submit process and only send the form after I have received the data back and the hidden field is populated?

Thanks!

[Darshil_Shah1]

myForm.addHiddenFields({
	//Sample example for adding the hidden field
	"Email":"test@example.com",
	"FirstName":"John",
	"LastName":"Doe"
	});

I see you haven't put the quotes to your hidden field name in the code, that might also be the error. Try it and let us know! 🙂

[SanfordWhiteman]

---

I see you haven't put the quotes to your hidden field name in the code, that might also be the error. Try it and let us know!

---

A JS property name (it is not a JSON object, it's a JS Object) doesn't need to be quoted unless it contains characters that break the parser, such as spaces or quotation marks. Marketo form fields are already normalized so they don't need to be quoted.

That's far from the reason for the error, as you'll see in a moment.

[SanfordWhiteman]

What you're doing here will never work because you're throwing out an asynchronous request (as you should, synchronous requests are deprecated) but not waiting for the response.

You've given no reason for the browser (let alone the Marketo Forms 2.0 API) to wait for the response. The next step is to submit the form, so it proceeds.

[Pepe_Serralvo]

Hi Sandford,

Thanks for you response! I'm trying to wait until the ajax call id done and the data received to then submit the form, but so far is not working 😞

Thanks again!

[SanfordWhiteman]

Keep workin' on it, it's possible (that's the way we do last-step enrichment from a remote Sheet, etc.).