Does form.onFormRender work? | Community
Skip to main content
A
Anonymous
July 14, 2014
Solved

Does form.onFormRender work?

  • July 14, 2014
  • 5 replies
  • 2579 views
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


This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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

5 replies

A
Anonymous
July 14, 2014
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? 
A
Anonymous
Accepted solution
July 15, 2014
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
A
Anonymous
July 15, 2014
You are correct. The API docs needs revising. I will make sure that gets done. Thanks for posting this!
A
Anonymous
July 18, 2014
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]

A
Anonymous
July 18, 2014
Thanks Ian - that works...
Terms & ConditionsAccessibility statement

Loading footer...