Использование двух элементов с неуникальным идентификатором в HTML-форме

Question

У меня есть форма, которую я использую повторно, но ярлыки на разных языках.

По сути, пользователь выбирает язык из выпадающего списка, и ярлыки отображаются в зависимости от выбора.

Тем не менее, я отметил, что, поскольку я повторно использую те же идентификаторы, он дает сбой и выдает предупреждения Found 2 elements with non-unique id.

<div class="button dropdown"> 
  <select id="languageselector">
     <option value="english">English</option>
     <option value="swahili">Swahili</option>
  </select>
</div>

 <div id="english" class="language english">
        <form id="reviewForm" method="POST" action="/review/post">
        <div id="reviewFormPage">
        {!! csrf_field() !!}
        {!! Form::hidden('business_name', $provider->businessId, ['class'=>'form-control', 'id' => 'businessId']) !!}
        {!! Form::hidden('acceptTerms', null, ['class'=>'form-control', 'id' => 'acceptTerms']) !!}
            <div class="row">
                <div class="col-xs-12">
                    <div class="checkbox icheck">
                        <label>
                        {!! Form::checkbox('existing_customer', '1', false, ['id' => 'existing_customer_review']) !!}
                            I am an existing customer.
                        </label>
                    </div>
                </div>
            </div>
       </form>
 </div>


 <div id="swahili" class="language swahili">
        <form id="reviewForm" method="POST" action="/review/post">
        <div id="reviewFormPage">
        {!! csrf_field() !!}
        {!! Form::hidden('business_name', $provider->businessId, ['class'=>'form-control', 'id' => 'businessId']) !!}
        {!! Form::hidden('acceptTerms', null, ['class'=>'form-control', 'id' => 'acceptTerms']) !!}
            <div class="row">
                <div class="col-xs-12">
                    <div class="checkbox icheck">
                        <label>
                        {!! Form::checkbox('existing_customer', '1', false, ['id' => 'existing_customer_review']) !!}
                            Mimi ni mteja anayerudi.
                        </label>
                    </div>
                </div>
            </div>
       </form>
 </div>

Javascript

<script type="text/javascript">
    $(function() {
      $('#languageselector').change(function(){
        $('.language').hide();
        $('#' + $(this).val()).show();
      });
    });
</script>

Поэтому, когда я выбираю swahiliвыпадающий я получаю ошибку в браузере.Found 2 elements with non-unique id #businessId

Полагаю, это связано с тем, что я использую одни и те же поля, кроме меток.

Мне нужно сохранить это так, потому что при выделении меняются только метки.

Кто-нибудь?

Answer 1

В вашем случае есть только одна строка, которая изменяется в зависимости от языка, поэтому вы можете сделать это вместо этого:

<div class="button dropdown"> 
  <select id="languageselector">
     <option value="english">English</option>
     <option value="swahili">Swahili</option>
  </select>
</div>

 <div class="language">
        <form id="reviewForm" method="POST" action="/review/post">
        <div id="reviewFormPage">
        {!! csrf_field() !!}
        {!! Form::hidden('business_name', $provider->businessId, ['class'=>'form-control', 'id' => 'businessId']) !!}
        {!! Form::hidden('acceptTerms', null, ['class'=>'form-control', 'id' => 'acceptTerms']) !!}
            <div class="row">
                <div class="col-xs-12">
                    <div class="checkbox icheck">
                        <label>
                        {!! Form::checkbox('existing_customer', '1', false, ['id' => 'existing_customer_review']) !!}
                            <!-- See below changes-->
                            <label class="lang-label" lang="english">I am an existing customer.</label>
                            <label class="lang-label" lang="swahili">Mimi ni mteja anayerudi.</label>

                        </label>
                    </div>
                </div>
            </div>
       </form>
 </div>


 <script type="text/javascript">
    $(function() {
      $('#languageselector').change(function(){
        $('.lang-label').hide();
        $('.lang-label[lang="' + $(this).val() + '"]').show();
      });
    });
</script>

Также см. локализация laravel для перемещения статическоготекст и управлять им более эффективно.