jquery 找到2个ID不唯一的元素

hmtdttj4  于 2023-06-05  发布在  jQuery
关注(0)|答案(9)|浏览(188)

当我们在两个不同的form标记中使用相同的id名称时,我收到以下警告。
[DOM]找到2个ID不唯一的元素
以下是我的HTML代码片段:

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

如何解决“Found 2 elements with non-unique id”警告?

bwntbbo3

bwntbbo31#

您需要将id="Job_Name"更改为唯一,例如id="Job_Name1" id="Job_Name2"等因为ID在DOM中必须是唯一的。
当你想使用document.getElementById('Job_Name')或jQuery $('#Job_Name')选择元素时,它会产生冲突,因为你无法获得第二个或其他具有相同id的元素。你将需要使用index和querySelectorAll,这将破坏在第一个位置使用Id的目的。

qkf9rpyu

qkf9rpyu2#

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

两种不同形式的重复输入标记
你必须为不同的元素使用不同的id

f8rj6qna

f8rj6qna3#

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

您需要为每个输入更改de id

g6ll5ycj

g6ll5ycj4#

因为你提到了同一页中具有相同id('Job_Name ')的两个输入元素你不能将同一页中的相同id赋予两个不同的元素

hxzsmxv2

hxzsmxv25#

id是定义元素标识的标识符。它被设计成像元素的key一样,因此它需要是唯一的。
检查这个答案。https://stackoverflow.com/a/2187788/8230086

gojuced7

gojuced76#

更改输入上的ID,因为它们是导致问题的原因。
一般来说,你不希望在任何元素上使用相同的id。
我建议使用沿着job_name1/job_name2的方法

yftpprvb

yftpprvb7#

只需为两个字段之一使用new { id =“”}:

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

pbwdgjma8#

如果使用ReactNative Web或Expo pwa,请使用nativeID代替ID

<input nativeID="someId"/>
eoxn13cs

eoxn13cs9#

你只需要使用一个表单,并把所有的输入标签放在里面,这可能会起作用。读取https://www.chromium.org/developers/design-documents/create-amazing-password-forms/

相关问题