Does form.onFormRender work?

[Anonymous]

When I call form.onFormRender in my code associated to a Forms 2.0 form (as per the documentation http://developers.marketo.com/documentation/websites/forms-2-0/) I get 
"Uncaught TypeError: undefined is not a function"
Code looks like this:
MktoForms2.loadForm("//app-sjg.marketo.com", "572-XMB-986", MarketoFormId, function(form){
    form.onFormRender(function(rendered){
       conole.log(form);
    }
});

Anyone got this to work, or got ideas on whether its actually been implemented?
Thanks
Ben

[Anonymous]

One potential problem might be that forms2 script has not loaded on page, before you are calling the function include in the script. 

1. <script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
2.  

Can you please verify the script has loaded before calling the onFormRender function? 

[Anonymous · Accepted solution]

Don't think so... my script waits for dom ready, then calls MktoForms2.loadForm (which works) then calls onFormRender on the form object (as well as other functions on form as defined in the docs) - which comes back undefined.  

However I noticed by logging out the objects "MktoForms2" and "form" that there is a method called MktoForms2.onFormRender() (as opposed to form.onFormRender() as stated in the documentation).  Passing back & in a reference to form enables me to call it, as shown below:

[code]

(function($) {

  $.fn.loadForm = function() {

    var form =  MktoForms2.loadForm("//app-sjg.marketo.com", "572-XMB-986", MarketoForm, function(form){
      //this works
      console.log(form); //shows no method called "onFormRender"  

      form.onSubmit(function(){
          //this works
      });

      form.onValidate(function(){
          //this works
      });
//      form.onFormRender(function(){
//          //if uncommented this dies with the error decribed above
//      });

      return form;
    });
    return form;
  }

  $.fn.onFormRender = function(form) {

    MktoForms2.onFormRender(function(form){

      console.log("rendered");

      form.getFormElem().find("*").removeAttr('style'); //strips all inline styles whenever the form is rendered

    });

  }
 

  $(document).ready(function() {

    var form = $().loadForm();

    $().onFormRender(form);

  });

}(jQuery));

[/code]

Does the API documentation & the examples need revising?  Or am I missing something?
Thanks
Ben

[Anonymous]

You are correct. The API docs needs revising. I will make sure that gets done. Thanks for posting this!

[Anonymous]

Ben... you're right about onFormRender, it's a top-level MktoForms2 API.

One other thing here.  The function MktoForms2.loadForm doesn't return a form object, as it's asynchronous.  Its callback will get a reference to the form object, but it will not return you one.   Because of that you've got a few places where you're trying to pass a form object, but aren't.

Here's your example with those extra form references removed.

[code]

(function($) {

  $.fn.loadForm = function() {

     MktoForms2.loadForm("//app-sjg.marketo.com", "572-XMB-986", MarketoForm, function(form){
      //this works
      console.log(form); //shows no method called "onFormRender"  

      form.onSubmit(function(){
          //this works
      });

      form.onValidate(function(){
          //this works
      });
//      form.onFormRender(function(){
//          //if uncommented this dies with the error decribed above
//      });

      return form;
    });
  }

  $.fn.onFormRender = function() {

    MktoForms2.onFormRender(function(form){

      console.log("rendered");

      form.getFormElem().find("*").removeAttr('style'); //strips all inline styles whenever the form is rendered

    });

  }
 

  $(document).ready(function() {

    $().loadForm();

    $().onFormRender();

  });

}(jQuery));

[/code]

[Anonymous]

Thanks Ian - that works...