Multiple Forms on a Page - Weird behavior when some labels are clicked | Community
Skip to main content
Lucho_Soto
Lucho_Soto
New Participant
May 17, 2017
Solved

Multiple Forms on a Page - Weird behavior when some labels are clicked

  • May 17, 2017
  • 2 replies
  • 6463 views

We have 3 forms on this page on our website hatchearlylearning.com/customer-support/hatch-tech-support . The bottom 2 forms are accessed by clicking on the link that says Upgrade iSS Software and Upgrade TeachSmart Software, respectively.

For some reason, clicking on some of the labels on the 2 bottom forms (First Name text, Last Name Text, etc.) makes users jump to the top of the page to the matching field on the first form. It looks like this is happening with the field names that the top form and the bottom forms have in common.

I filed a ticket with support and was told this is out of their scope and that only 1 form is supported per page. Has anyone run into this issue with multiple forms on one page or have any ideas on how to get around it?

    Best answer by SanfordWhiteman
    I filed a ticket with support and was told this is out of their scope and that only 1 form is supported per page.

    Ha, gotta love it.

    Add this:

    MktoForms2.whenRendered(function(form){
      var formEl = form.getFormElem()[0],
          rando = '_' + Math.random();
      [].slice.call(formEl.querySelectorAll('label[for]')).forEach(
        function(labelEl){
          var forEl = formEl.querySelector('[id="'+ labelEl.htmlFor + '"]');
          labelEl.htmlFor = forEl.id = forEl.id + rando;
        });
    });

    2 replies

    Lucho_Soto
    Lucho_SotoAuthor
    New Participant
    May 19, 2017

    Implemented this on our dev site and it works perfectly. We'll roll it out to the main site as soon as the rest of the page is approved internally. Thanks for your help!

    SanfordWhiteman
    SanfordWhitemanAccepted solution
    New Participant
    May 17, 2017
    I filed a ticket with support and was told this is out of their scope and that only 1 form is supported per page.

    Ha, gotta love it.

    Add this:

    MktoForms2.whenRendered(function(form){
      var formEl = form.getFormElem()[0],
          rando = '_' + Math.random();
      [].slice.call(formEl.querySelectorAll('label[for]')).forEach(
        function(labelEl){
          var forEl = formEl.querySelector('[id="'+ labelEl.htmlFor + '"]');
          labelEl.htmlFor = forEl.id = forEl.id + rando;
        });
    });
      Lucho_Soto
      Lucho_SotoAuthor
      New Participant
      May 18, 2017

      Thanks for your help, Sanford. Would this be added to each form on the page or just the ones that are having issues? Sorry, I only have a very rudimentary understanding of form functions. I took a stab at it below:

      <script src="//app-sj04.marketo.com/js/forms2/js/forms2.min.js"></script>

      <form id="mktoForm_1598"></form>

        <script>MktoForms2.loadForm("//app-sj04.marketo.com", "980-GBD-747", 1598);</script>

      <script>

      MktoForms2.whenRendered(function(form){ 

        var formEl = form.getFormElem()[0], 

            rando = '_' + Math.random(); 

       

        [].slice.call(formEl.querySelectorAll('label[for]')).forEach( 

          function(labelEl){ 

            var forEl = formEl.querySelector('[id="'+ labelEl.htmlFor + '"]'); 

            labelEl.htmlFor = forEl.id = forEl.id + rando; 

          }); 

      }); 

      </script>               

      <script>

                          MktoForms2.whenReady(function (form){

                              //Add an onSuccess handler

                              form.onSuccess(function(values, followUpUrl){

                                  //get the form's jQuery element and hide it

                                  form.getFormElem().hide();

                                  document.getElementById('confirmformupgrade').style.visibility = 'visible';

                                  //return false to prevent the submission handler from taking the lead to the follow up url.

                                  return false;

                              });

                          });

                      </script>

                      <div id="confirmformupgrade" style="visibility:hidden; text-align: center;">Thank you! We will be in touch soon.</div>

                  </div>

        SanfordWhiteman
        SanfordWhiteman
        New Participant
        May 18, 2017

        Just add it once. It covers all forms.

        The reason for the observed behavior is that -- as explicitly defined by the HTML standard -- a label's for attribute targets the first matching element in the DOM.  Ergo if there are multiple elements with the same ID (which, despite being invalid, is supported by all browsers) the first one will be used. Luckily querySelector lets us target by parent element and ID, so we can correctly seek the element we want and then make its name truly unique.

          Terms & ConditionsAccessibility statement

          Loading footer...