Question

我有这个表格供用户介绍一些数据在国会注册。

首先他需要介绍一些买家信息，然后如果有一些付费的票类型也有一些账单信息。然后，如果会议表有列＆＃34; collect_data_from_all_participants＆＃34;因为1还需要为每个选定的票证类型引入信息。每种票据类型的此信息是每个参与者的姓名和姓氏，因此我有字段的名称＆＃34;名称＆＃34; as＆＃34; name＆＃34;和＃34; Surname＆＃34;名字＆＃34;姓氏＆＃34;。 Ť

然后问题出现在控制台中：

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

Answer 1

您的问题是所有id属性对于单个文档必须是唯一的。来自MDN：

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

您正在循环使用标识为<input>和name的{{1}}元素，这会导致多个元素具有相同的ID。如果从这些输入元素中删除ID，则警告将消失。

Answer 2

元素上的id必须是唯一的。您有几个使用相同ID（名称，姓氏）的元素。您可以删除ID或更改ID，以便它们是唯一的。如果你有引用id的相关代码（CSS，JS等），你也需要更新它。

对于需要被其他代码定位的元素，使用类而不是id是很常见的。这减少了创建或维护唯一ID的工作量。

如何正确更正此找到的具有非唯一ID错误的元素？

2 个答案: