Found 2 elements with non-unique id

user_2463112 0
Viewed 37703

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?

bootstrap-4 html5-video html jquery javascript
8 Answers

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.

user_82335480 
 <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

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

You need to change de id for each input

user_163358330

Becouse You mentioned the two input element with same id ('Job_Name') in same page You cannot give the same id in same page to two different element

user_121352680
user_82300860

Change the IDs on your inputs as they are what is causing your problem.

As a general rule you don't want to have the same id's on any of your elements.

id suggest using something along the lines of job_name1/job_name2

user_118126900

Just use new { id = "" } for one of the two fields:

@Html.HiddenFor(m => m.Name, new { id = "" })
user_16040480

if you are using react native web or expo pwa use nativeID in place of id

<input nativeID="someId"/>
user_103580830
Related