Found 2 elements with non-unique id

Question

I am getting the following warnings when we use with the same id names in two different form tags.

[DOM] Found 2 elements with non-unique id

Here is my HTML snippet:

               <div class="modal-dialog">
                    <form action="" method="post" id="myid-1" name="myid-1">
                        <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
                        <label for="Job_Name">Job Name<span class="text-danger">*</span></label>
                        <button type="submit">Submit</button>
                    </form>
                </div>

                <div class="modal-dialog">
                    <form action="" method="post" id="myid-2" name="myid-2">
                        <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
                        <label for="Job_Name">Job Name<span class="text-danger">*</span></label>
                        <button type="submit">Submit</button>
                    </form>
                </div>

How do I resolve "Found 2 elements with non-unique id" warnings?

Solution 1

you need to change id="Job_Name" to be unique e.g. id="Job_Name1" id="Job_Name2" etc. as ID must be unique in the DOM.

It will create conflict when you want to select elements using document.getElementById('Job_Name') or using jQuery $('#Job_Name') as you wont be able to get the second or other elements with same id. you will need to use index and querySelectorAll which will then defeat the purpose of using Id at first place.

Solution 2

 <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >

Duplicate input tag in two different forms

You have to use different id for different elements

Solution 3

<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">

You need to change de id for each input

Comments

[Carsten Løvbo Andersen]

There is no need to use caps like this.