Submit Marketo form and stay on page to display "thank you" messaging-script not working

[Anonymous]

Hello,
I have an onSubmit function to submit leads into Marketo (had to do some customizing to load form data into Salesforce); I tried adding the onSuccess code to have the form stay on the page after form submission, hide the form and show a thank you div instead. However, it isn't working... the form stalls as it's submitting and does not submit anything (the submit button has become inactive).

Any thoughts? Thanks!

<script>MktoForms2.loadForm("************", "*****", ****,
function(form){
    
//Add the hidden fields for Calculator Quote URL
    var currentURL = window.location.href;
      form.addHiddenFields({"Calculator_Quote_URL__c":currentURL, "Company":"", "Lead_Created_Date__c":""});


    //add an onSubmit handler
      form.onSubmit(function(){    
    
        //Fill in the hidden company field for SF
        $('[name="Company"]').val($("#LastName").val() + ', ' +  $("#FirstName").val());
        
        //Get the current date and insert into lead created date for SF
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        }

        if(mm<10) {
            mm='0'+mm
        }

        today = mm+'/'+dd+'/'+yyyy;
        //document.write(today);
        $('[name="Lead_Created_Date__c"]').val(today);
        
        //get the form field values
        varvals = form.getValues();
    
    });
     //Add an onSuccess handler
      form.onSuccess(function(){    
    
     //get the form's jQuery element and hide it and show thank you
    form.getFormElem().hide();
            document.getElementById('confirmform').style.visibility = 'visible';
        
         //return false to prevent the submission handler from taking the lead to the follow up url.    
        return false;
    
    });


});

</script>

[Anonymous]

When developing debugging JavaScript, I use the "Inspect element" console in Chrome/Firefox. 

1) I insert multiple console.log("XXX") statements throughout my code and see which one failed to execute
2) As soon as you click submit, see if the console outputs javascript error messages in the console.

Other than that, here are some minor issues

Missing semicolons beside 
 dd='0'+dd
mm='0'+mm

I think you meant varvals = form.getValues(); to be var vals = form.getValues(); (unless you're really declaring a global variable varvals)

[SanfordWhiteman]

@Jen you're mixing together jQuery-speak and plain JS and it definitely makes your code harder to read (to be fair, this forum is not at all suited for code).

Here's a simple no-framework fixup of your code. Notice: [1] you don't have to do a DOM lookup for the form elements as they are already referenced off the Marketo form object; [2] getFormElem() returns an array, which was probably tripping you up.
 

http://jsfiddle.net/sanford/3k458t1r/1/

[Anonymous]

Hi guys, I made both of your suggested revisions and nada... the form still doesn't submit and the submit button still hangs as deactivated. 😞

[SanfordWhiteman]

When you say, "Deactivated" are you actually checking for the form submission on the wire?  When you use event handlers the button may stay in the grayed-out "Please Wait" state but the data is still sent (to Marketo's server-side handler `save2`).  

Also, the only change I made to the Fiddle before linking to it was removing our Marketo account code so I don't know what you did differently. You can see it working here: http://jsfiddle.net/sanford/3k458t1r/2/

[Anonymous]

D'oh, it works. It wouldn't let me run it off of my desktop, but once I added it to the site to test, it worked. Thanks!

[SanfordWhiteman]

OK, great!

[Anonymous]

Heres our code, we dont have any issues with it.

form.onSuccess(function() {
$(form.getFormElem()).trigger("data-ajax-success");
$(".formThankYou").slideDown();
$(form.getFormElem()).slideUp(null, function() {
$(window).resize();
});

return false;
});