我有这个表格,让用户介绍一些数据,以便在国会注册。
首先,他需要介绍一些买家的信息,然后,如果有一些付费票类型,也有一些帐单信息。然后,如果国会表将列"collect_data_from_all_participants“作为1,则usre还需要为每个选定的票证类型引入信息。每个票证类型的信息都是每个参与者的名字和姓氏,所以我有字段的名称" name“作为" name”,字段" surname“的名称是”姓氏“。T
然后,他的问题出现在控制台上:
[DOM] Found 4 elements with non-unique id #name:
`DOM] Found 3 elements with non-unique id #surname:
你知道纠正这个问题的最佳方法是什么吗?
<div class="registration_form mt-4">
<form method="post" class="clearfix">
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
<h6>Buye information</h6>
<div class="form-group font-size-sm">
<label for="name" class="text-gray">Name</label>
<input type="text" required class="form-control" id="name" value="{{ (\Auth::check()) ? Auth::user()->name : old('name')}}">
</div>
<div class="form-group font-size-sm">
<label for="surname" class="text-gray">Surname</label>
<input type="text" required class="form-control" name="surname" id="surname" value="{{ (\Auth::check()) ? Auth::user()->surname : old('surname')}}">
</div>
<div class="form-group font-size-sm">
<label for="email" class="text-gray">Email</label>
<input type="text" required class="form-control" name="emai" id="email" value="{{ (\Auth::check()) ? Auth::user()->email : old('email')}}">
</div>
@if( array_sum(array_column($selectedRtypes, 'price')) > 0 )
<h6>Billing information</h6>
<div class="form-group font-size-sm">
<label for="name" class="text-gray">Name</label>
<input type="text" required class="form-control" id="name">
</div>
<div class="form-group font-size-sm">
<label for="inputName" class="text-gray">Country</label>
<input type="text" required class="form-control" id="inputName">
</div>
<!-- other fields -->
@endif
@if (!empty($allParticipants))
@if($allParticipants == 1)
@foreach($selectedRtypes as $k=>$selectedRtype)
<h6 class="text-heading-blue mb-3 pb-2 font-weight-bold">Participant - 1 - {{$k}}</h6>
<div class="form-group font-size-sm">
<label for="name" class="text-gray">Name</label>
<input type="text" required class="form-control" id="name" value="">
</div>
<div class="form-group font-size-sm">
<label for="surname" class="text-gray">Surname</label>
<input type="text" required class="form-control" name="surname" id="surname" value="">
</div>
@endforeach
@endif
@endif
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn btn-primary btn float-right next-step">
Go to step 2
</button>
</div>
<div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
<form method="post" class="clearfix">
<h6>Select payment type</h6>
<!-- step 2 fields-->
<div class="text-right">
<button type="button" href="#step3" data-toggle="tab" role="tab"
class="btn btn-outline-primary prev-step">
Go to step 2
</button>
<button type="button" href="#step3" data-toggle="tab" role="tab"
class="btn btn-primary btn ml-2 next-step">
Go to step 3
</button>
</div>
</form>
</div>
<div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
<form method="post" class="clearfix">
<!-- step 3 fields-->
</form>
</div>
</div>
</form>
</div>
发布于 2018-04-16 11:26:52
您的问题是,对于单个文档,所有id属性都必须是唯一的。来自MDN
id全局属性定义了唯一标识符(ID),该标识符在整个文档中必须是唯一的。它的目的是在链接(使用片段标识符)、脚本或样式(使用CSS)时标识元素。
在<input>
元素上循环使用id、name
和surname
,这会导致具有相同id的多个元素。如果从这些输入元素中删除ids,则警告将消失。
发布于 2018-04-16 11:32:18
元素上的id必须是唯一的。您有几个元素使用相同的id (名称、姓氏)。您可以移除id或更改id,以便它们是唯一的。如果您有引用id的相关代码(CSS、JS等),则还需要更新该代码。
对于需要被其他代码锁定的元素,通常使用类而不是id。这减少了创建或维护唯一id的工作量。
https://stackoverflow.com/questions/49864807
复制