dqy27359
dqy27359
2018-04-16 19:23

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

已采纳

I have this form for a user to introduce some data to register in a congress.

First he needs to introduce some buyer information, then if there is some paid ticket type also some billing information. Then if the congress table has the column "collect_data_from_all_participants" as 1 the usre also needs to introduce information for each selected ticket type. This information for each ticket type is the name and surname of each participant so I have the name of the field "Name" as "name" and the field "Surname" with the name "surname". T

he issue is then in the console it appears :

 [DOM] Found 4 elements with non-unique id #name: 

`DOM] Found 3 elements with non-unique id #surname: 

Do you know what is the best approach to correct the issue?

<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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • duanqian9593 duanqian9593 3年前

    Your problem is that all id attributes must be unique for a single document. From MDN:

    The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

    You are looping over <input> elements with id name and surname which causes multiple elements with the same id. If you remove the ids from these input elements, your warnings will go away.

    点赞 评论 复制链接分享
  • doulin2555 doulin2555 3年前

    The id on elements must be unique. You have several elements using the same id (name, surname). You can either remove the id or change the id's so they are unique. If you have related code (CSS, JS, etc) that refers to the id's, you'll need to update that as well.

    It's common to use a class instead of an id for elements that need to be targeted by other code. This reduces the amount of work to create or maintain unique id's.

    点赞 评论 复制链接分享

相关推荐