Is there any proper way to reuse Id's?

Question

I have a \"create\" form inside a bootstrap\'s modal. All my Javascript related with that form uses id\'s and not class

Answer 1

Not really, no.

When you use IDs, you're telling the browser that the ID is uniquely available, on the page.

If you have two forms with the same IDs, that means you've broken that guarantee.

An example of where this causes problems is document.getElementById( ). It will grab the first element it finds. If there are two, it will only get you the first one.

Another issue: forms with IDs have a habit of being saved to Window, using that ID (this behaviour isn't 100% standard across every browser with more than 2% usage, globally, today, but it's still pretty common).

Ugly solutions I've seen in this space are things like "my-id-1" "my-id-2", et cetera, where you then access them like: document.getElementById("my-id-" + x);

...really not pretty at all...

...alternatively, you can keep the forms in JS, and just attach them to the page, when you want to switch back and forth. In this way, they can share IDs, so long as they're never attached to the page at the same time.

document.querySelector("#my-form") === form1; // true
form1.parentNode.replaceChild(form2, form1);
document.querySelector("#my-form") === form2; // true

Again, this isn't going to help you with the built-in form and input namespacing, in any meaningful way, but if that's a feature you are 100% ignoring (not a bad thing to do), this will solve those problems.

Alternatively, you could just move to classes and data-attributes (or just attributes), and life would get easier still...

Answer 2

No, there is no proper way to ever duplicate the use of id's. Browser behavior for this is a mixed bag and cannot be relied on.

Use classes instead or create dynamic id's for each form.

Answer 3

If you insist on using two forms on one 'page' and share ids between them, you have few options to make it work and be relatively 'clean' about it. Not knowing your technology stack, I can't give a completely relevant answer. However you can do something similar to the below:

HTML

<div id="myFormDiv"></div>

JAVASCRIPT

 $("#myFormDiv").load(urlToForm);

You would naturally need your forms to be in separate html files for this to work as there is no way you can reliably use ids on multiple elements in one html file.