JS/AJAX/jQuery Load Trigger for Embedded 2.0 Forms?

[Anonymous]

I'm trying to add descriptive classes to each .mktoFormRow on my embedded form 2.0.

One for checkboxes (so I can overcome the lack of 2.0 ability to put the box on the left -- WTF)
One for hidden fields (so I can add margins and other styles to .mktoFormRow without the hidden ones pushing stuff around)

This is my jQuery script:

jQuery(window).ready(function() {
    jQuery('input[type=hidden]').each(function(){
        jQuery(this).parents('.mktoFormRow').addClass("hidden");
    });
    jQuery('input[type=checkbox]').each(function(){
        jQuery(this).parents('.mktoFormRow').addClass("checkbox");
    });
});

This script runs perfectly (minus the trigger of course) in the Console in my browsers, but it doesn't work the way it's supposed to.

I've tried using the (window).ready, (document).ready, and even MktoForms2.whenReady but none of them work. What can I use to trigger my script after all fields have been loaded? I'd like to avoid a static timeout if I can.

[Anonymous · Accepted solution]

Hi Corry,

You are on the right track here. I would expect you to encounter issues with the script in its current form, because it runs on the document's ready event. The form has likely not finished initializing at this time.

I suggest you wrap this in MktoForms2.whenReady, since you want the form to be fully initialized before maipulating its fields. You mentioned that you tried this method unsuccessfully; can you describe the issue you encountered using whenReady?

I have posted below a script that should do what you're asking. It wraps your code in whenReady, and only searches the children of the Marketo form element for the specific fields.

Best,
Kyle

jQuery(window).ready(function() {
    MktoForms2.whenReady(function(form) {
        var formElement = form.getFormElem();
        jQuery(formElement).find('input[type=hidden]').each(function() {
            jQuery(this).parents('.mktoFormRow').addClass('hidden');
        });
        jQuery(formElement).find('input[type=checkbox]').each(function() {
            jQuery(this).parents('.mktoFormRow').addClass('checkbox');
        });
    });
});

[Anonymous]

Thanks Kyle! That worked perfectly 🙂

I was originally trying to do the whenReady function within the Embed code. Pulling it out of there and dropping it into its own <script> worked. Thanks again!