2 forms on same page with same fields

[Anonymous]

Hi All,

Here is what I am trying to do.

1. Two forms on the same webpage. 1st form stores data, submit button hidden to user, this form is not submitted it purpose is to store data. Its data is pushed to form 2 via Java Script
2. There is a proprietary calculator which user plays with - data sent to form 2 hidden fields via Java Script
3. 2nd form has all of the fields from form 1 hidden, Java Script populates these from form one

The problem. My developer has said that Marketo cannot handle the same database fields on the same page. This is his quote:

The problem occurs because the 2 forms appear together on the same HTML page, creating a syntactically invalid HTML which behaves in unpredictable ways.

The Question.

1. Do I have to create duplicate database fields with a slight variation for form once so that they can appear on the same page as form 2. These fields will be essentially dummy fields

Thanks in advance

Matt

[Kenny_Elkington · Accepted solution]

You're probably better off just using the forms API to add your values as hidden fields on submission instead of working with duplicate forms: Forms 2.0 » Marketo Developers​ You can use addHiddenFields() during the onSubmit() event to input your data into the fields.

[SanfordWhiteman]

1. Do I have to create duplicate database fields with a slight variation for form once so that they can appear on the same page as form 2.

Not exactly.  You can just remove the ID attributes from Form 1 before rendering Form 2. I posted this recipe a long time ago, which shows you can even have the same form ID rendered twice, as long as you make Form 2 depend on Form 1: MktoForms2 :: One Form, Two Renders

Your dev is right about the invalid HTML due to duplicate IDs, but the HTML-invalidity per se isn't what breaks the forms, since forms.js doesn't care about invalidity.  In fact, browsers are quite liberal in dealing with documents that have duplicate IDs.  "#id1 + #id1" is a valid CSS selector, for example (that means "element with ID id1 following another element that also has ID id1," which would never be found in an validated HTML doc but can occur in a real-world HTML doc). Of course if libraries like foms.js assume that a document is HTML valid, they expect to only find one element with ID id1 and barf when the doc is broken; but they could also be written to tolerate broken HTML and be none the wiser. [I know that was kind of a technical rant but I wanted to read my own writing. ]

Anyway... I agree with Kenny that I don't see much need for 2 forms when one is always going to be hidden.  The above solution was for someone who wanted to display the same form in two different parts of the same page (I think in reality it was a one-line form with only Email that s/he wanted to display at top and bottom of the page, though I used one of my larger test forms in the demo).