I'm posting a follow-up to another question asked here: Simulate a JSONP response with JavaScript URLs. I was following steine's answer in combination with nickjag's and got stuck at the end.
I'm successfully getting a submission to pass to Pardot, I used a little each loop to get all of the form names and values:
makeWebflowFormAjax = function( forms, successCallback, errorCallback ) {
forms.each(function(){
var form = $(this);
form.on("submit", function(){
var container = form.parent();
var doneBlock = $(".w-form-done", container);
var failBlock = $(".w-form-fail", container);
var action = form.attr("action");
var method = form.attr("method");
var data = form.serialize();
var dataURI = {};
form.find("input, textarea, select").each(function() {
var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
dataURI[this.name] = $(this).val();
}
});
dataURI = $.param(dataURI);
console.log(dataURI);
// call via ajax
$.ajax({
type: method,
url: action + '?' + dataURI,
dataType: 'jsonp',
jsonpCallback: 'callback'
});
// prevent default webflow action
return false;
});
});
}
I created two pages in webflow with the following as a custom script in the custom code section of the page:
<script>
return "callback({ 'result' : 'success' })"
</script>
The form is definitely hitting Pardot and passing the data through as I can see tests in the prospect database, but I am getting a console error in Chrome: Uncaught SyntaxError: Unexpected token < returning from the success page it appears. What it seems like I should be doing is based on the page that Pardot hits afterward running a function to show or hide the Webflow success/failure messages.
Something like this:
form.hide();
doneBlock.show();
failBlock.hide();
Any thoughts on what I need to do next? I feel like it's very close, but I'm just not sure how to tie those together.