8 Replies Latest reply on Jan 11, 2017 5:53 PM by Sheila Baker

    JQuery Label Manipulation with Field Visibility Enabled

    Sheila Baker

      I have a landing page that has jquery code that inserts the label for a field into the input box. I've updated the form to show Country/State where State is only visible when US or Canada is selected. I believe because the State field is not visible when the page is first rendered, when it becomes visible after selecting US or Canada in Country, there is no label visible in the State input box.

       

      Any jquery gurus out there that can help with this? 


      Example page is here: http://clouderp.kenandy.com/20161214-Nucleus-Faster-Payback-Email-Promo_Test-new-form.html

       

      Thanks so much!

      Regards,

      Sheila

        • Re: JQuery Label Manipulation with Field Visibility Enabled
          Sanford Whiteman

          There's no reason to use jQuery at all: it simply creates an additional dependency and adds no functionality.

           

          Anyway, wrap your code in the MktoForms2.whenRendered() event. You must use the Forms 2.0 event model in order to properly customize Marketo forms. The setTimeout() on your page should be removed and replaced with proper events (whenReady, whenRendered),

            • Re: JQuery Label Manipulation with Field Visibility Enabled
              Sheila Baker

              Hi Sanford,

              Thanks so much for your response. I think I'm a little shaky on what needs to change. Someone that is long gone wrote the current code on the landing page templates. I think the page already uses the Forms 2.0 event model - right? It is a guided landing page and there is a form element included so I believe that part is already taken care of. Am I correct here?

               

              I though this was the code on the page that needed to be updated:

              <script>

                  $(document).ready(function(){

                                   

                // Place form labels inside inputs

                if (placeholderIsSupported) {

                   

                setTimeout(function() {

                $('#formRight input[type=text],#formRight input[type=tel],#formRight input[type=email],#formRight textarea').each(function () {

                field_id = $(this).attr('id');

                label_text = $("label[for="+ field_id +"]").text();

                $(this).attr('placeholder',label_text);

                $("label[for='"+ field_id +"']").hide();

                            

                });

                $('#formRight select').each(function () {

                field_id = $(this).attr('id');

                $("label[for='"+ field_id +"']").hide();

                });

                },1000);

                }

                });

               

              // Check if placeholder is a supported attribute

                function placeholderIsSupported() {

                var test = document.createElement('input');

                   

                return ('placeholder' in test);

                }

                </script>

               

              But when I totally remove that code, the page behaves exactly the same way as it does with the code. So clearly that code is not doing anything on the page. See this url: Kenandy

               

              Maybe I need to take a step back... I have tried to set a first value in the Visibility Rules to say "Select State..." like this:

              But this doesn't work. What's your recommendation on how to make the state box show "Select State" when it is visible and has no pre-filled value? Thanks again for your help.

              Sheila