Interesting side-effect with multiple forms on a page | Community
Skip to main content
A
Anonymous
May 24, 2017
Question

Interesting side-effect with multiple forms on a page

  • May 24, 2017
  • 1 reply
  • 1844 views

Note this is present whether you are placing multiple copies of the same form, or just two completely different forms that happen to collect some of the same data (for example, "First Name") on a web page.

If you try directly walking from a label to its associated input field, it'll fail. For example, let's say the label is in javascript variable 'fieldLabel' and so this javascript:

fieldLabel.control

is supposed to take you to the control indicated in the label's "for" attribute (useful if you want to tweak a form field based on characteristics of its label). Unfortunately, Marketo gives multiple instances of the same field name the same Name/ID while the browser is expecting ID's to be unique, so that method will retrieve the correct input field only accidentally. It will always return the first matching input field, even if the label you started from is inside a completely different form on the page.

Just wanted to save someone else time tearing their hair out over why their javascript wasn't working. Took me a while to realize the first form's fields were the ones changing in reaction to the characterstics in the second form's labels.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
May 24, 2017

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

A
Anonymous
May 31, 2017

Went a slightly different direction, myself. I just stopped trying to walk directly from label to field. For completeness' sake I should probably go back and change the field ID's, but since this was the only time the duplicate ID's bit me, for the quick-and-dirty fix I put in a scoped a request to the children of the form when looking for the field ("#formID #htmlFor" as a query selector string) rather than using the .control field. It's a query selector  tht borders on the absurd, but the underlying spec is robust enough to handle uses that lie outside the original intent of the tool.

And yes, i love Marketo's response to your ticket.

SanfordWhiteman
SanfordWhiteman
Level 10
May 31, 2017

I put in a scoped a request to the children of the form when looking for the field ("#formID #htmlFor" as a query selector string)

That's the same as formEl.querySelector('[id="'+ labelEl.htmlFor + '"]').

Terms & ConditionsAccessibility statement

Loading footer...