当我们在两个不同的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”警告?
9条答案
按热度按时间bwntbbo31#
您需要将
id="Job_Name"
更改为唯一,例如id="Job_Name1" id="Job_Name2"
等因为ID在DOM中必须是唯一的。当你想使用
document.getElementById('Job_Name')
或jQuery$('#Job_Name')
选择元素时,它会产生冲突,因为你无法获得第二个或其他具有相同id的元素。你将需要使用index和querySelectorAll,这将破坏在第一个位置使用Id的目的。qkf9rpyu2#
两种不同形式的重复输入标记
你必须为不同的元素使用不同的id
f8rj6qna3#
您需要为每个输入更改de id
g6ll5ycj4#
因为你提到了同一页中具有相同id('Job_Name ')的两个输入元素你不能将同一页中的相同id赋予两个不同的元素
hxzsmxv25#
id
是定义元素标识的标识符。它被设计成像元素的key
一样,因此它需要是唯一的。检查这个答案。https://stackoverflow.com/a/2187788/8230086
gojuced76#
更改输入上的ID,因为它们是导致问题的原因。
一般来说,你不希望在任何元素上使用相同的id。
我建议使用沿着job_name1/job_name2的方法
yftpprvb7#
只需为两个字段之一使用new { id =“”}:
pbwdgjma8#
如果使用ReactNative Web或Expo pwa,请使用nativeID代替ID
eoxn13cs9#
你只需要使用一个表单,并把所有的输入标签放在里面,这可能会起作用。读取https://www.chromium.org/developers/design-documents/create-amazing-password-forms/