Submitting hidden form using forms2.js never fires onSuccess

Jorge_Pinon
Level 1

Submitting hidden form using forms2.js never fires onSuccess

UPDATE: This works when I start with a new Safari incognito window, but then when I try it again on the same window I get the same behavior described below.

First off, I've looked at other similar questions here and have tried those suggestions without any luck. Some of those discussions are a couple of years old so I thought a new thread is called for.

Essentially I'm trying to implement a hidden form submission (like this) but I can't get onSuccess to fire. I'm testing on localhost, which is what I think the problem might be.

I'm getting one error in devtools:


URL: http://pages.addigy.com/index.php/leadCapture/save2
URL: http://pages.addigy.com/index.php/leadCapture/save2
Status: 400 Bad Request
Source: Network
Address: 104.17.70.206:80
Initiator:
XDFrame:1:780

and the request preview makes me think that the formId is failing in that request at some point?

{
  "error": true,
  "errorCode": 400,
  "message": "{leadCapture/save2} Approved form not found: "
}

Here's my basic approach:

On the template I have a native form element with matching fields to the ones defined in the Marketo form. Then I load the Marketo form using our CNAME domain:

<script src="https://pages.addigy.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1296" style="display: none;"></form>
<script>MktoForms2.loadForm("https://pages.addigy.com", "641-IKD-453", 1296);</script>

On the submit event of the form, I do some simple validation and then (this is shortened for clarity):

MktoForms2.whenReady(function (form) {

// create account on callback event
form.onSuccess(function(values, followUpUrl) {
DataRequest.doRegistration().then(function(data) {
location.href = followUpUrl;
},function() {
showError('Could not create your account.');
});
return false;
});

// add fields to mkto form
var formValues = {
FirstName: self.firstName,
LastName: self.lastName,
Email: self.email,
Company: self.companyName,
Country: self.country,
State: self.state
};
form.setValues(formValues);
    form.addHiddenFields({ 'something' : 'hello' });

// post mkto form
form.submit();
});

As I said, the onSuccess never fires. I'm wondering if a less hacky approach is to use onSubmit anyway, since in our case the lead gen is secondary to the actual account registration, but I really still need the lead gen to work.

I added an onValidate function just to check whether it was returning valid (true) before the post and it was. 

13 REPLIES 13
SanfordWhiteman
Level 10 - Community Moderator

Re: Submitting hidden form using forms2.js never fires onSuccess

The obvious question is: does this work without the event listener? 

If not, then it's not about that. And if you're getting that rejection based on an unapproved/missing form then switching to onSubmit is just masking a major problem and acting like the form is being successfully posted.

Jorge_Pinon
Level 1

Re: Submitting hidden form using forms2.js never fires onSuccess

Yeah. I do get into the whenReady block, and if I step through I see that setValues and addHiddenFields all work as expected. 

Not sure if you saw the update, but using a brand new incognito window it works every time. Refreshing the page in that same window again makes it fail. A new non-incognito window also fails every time.

SanfordWhiteman
Level 10 - Community Moderator

Re: Submitting hidden form using forms2.js never fires onSuccess

I was asking if the submission works without the onSuccess listener (the failure response you posted indicates the submission was not successful, so not firing onSuccess is perfectly normal).

You're going to have to publish a page I can look at 

Jorge_Pinon
Level 1

Re: Submitting hidden form using forms2.js never fires onSuccess

Interesting, I commented out the whole form.onSuccess block and it still fails. Unfortunately I can't publish it for a few days because we have other stuff in the QA pipeline. 

SanfordWhiteman
Level 10 - Community Moderator

Re: Submitting hidden form using forms2.js never fires onSuccess

OK, let me know when it's up.

Jorge_Pinon
Level 1

Re: Submitting hidden form using forms2.js never fires onSuccess

Thanks Sanford Whiteman‌. Here's another clue that might help (Chrome didn't show this error but Safari does). The save2 request fails with a 400:

Summary
URL: http://pages.addigy.com/index.php/leadCapture/save2
URL: http://pages.addigy.com/index.php/leadCapture/save2
Status: 400 Bad Request
Source: Network
Address: 104.17.71.206:80
Initiator:
XDFrame:1:780


Request
POST /index.php/leadCapture/save2
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://pages.addigy.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15
X-Requested-With: XMLHttpRequest

Redirect Response
302 Found
Cache-Control: no-store
Location: http://pages.addigy.com/index.php/leadCapture/save2

Request
POST /index.php/leadCapture/save2 HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: http://pages.addigy.com
Connection: keep-alive
Accept-Encoding: br, gzip, deflate
Host: pages.addigy.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15
Accept-Language: en-us
Content-Length: 0
X-Requested-With: XMLHttpRequest

Response
HTTP/1.1 400 Bad Request
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *
Set-Cookie: __cfduid=d6c93......806; expires=Fri, 06-Nov-20 21:56:46 GMT; path=/; domain=.pages.addigy.com; HttpOnly
Set-Cookie: __cf_bm=83612........8-1573163806-1800-AXT1udUPJc/aFQ9ClVenmUIK/LwKv6vZFS9yzE/zuzw3H2TR4sz5cif3XqH/YtTfgrj2pAS43zYOJoBfwKs0r/k=; path=/; expires=Thu, 07-Nov-19 22:26:46 GMT; domain=.pages.addigy.com; HttpOnly
Content-Encoding: gzip
Date: Thu, 07 Nov 2019 21:56:46 GMT
Content-Length: 100
Connection: keep-alive
X-Content-Type-Options: nosniff
Vary: Accept-Encoding
Server: cloudflare
CF-Cache-Status: DYNAMIC
CF-RAY: 53228f1cdbb1c88f-MIA

Request Data
MIME Type: application/x-www-form-urlencoded; charset=UTF-8
utmcampaign
utmmedium
utmcontent
utmsource
utmterm
Last_Marketing_Activity__c: Form Fill: Free Trial
FirstName: j
LastName: p
Email: jorge+1107-1656@addigy.com
Company: add
Country: Canada
State
formid: 1296
munchkinId: 641-IKD-453
signup_method__c: password
_mkt_trk
formVid: 1296
_mktoReferrer: http://localhost:8000/signup

And the request preview is just 

{
  "error": true,
  "errorCode": 400,
  "message": "{leadCapture/save2} Approved form not found: "
}

Jay_Jiang
Level 10

Re: Submitting hidden form using forms2.js never fires onSuccess

As per the error then, is 1296 actually an approved form in your instance?

SanfordWhiteman
Level 10 - Community Moderator

Re: Submitting hidden form using forms2.js never fires onSuccess

It is an approved form.

SanfordWhiteman
Level 10 - Community Moderator

Re: Submitting hidden form using forms2.js never fires onSuccess

I'd advise you to wait until you can put this somewhere other than localhost (btw just because it's on your local machine doesn't mean it can't have an FQDN/listen on port 80).

I don't have any probs posting to your /save2 with that payload.