Question

我有一个正在重复使用的表单，但是标签使用了不同的语言。

本质上，用户从下拉菜单中选择语言，然后根据选择显示标签。

但是，我已经注意到，由于我正在重复使用相同的ID，因此它失败并发出警告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的localization，以移动静态文本并更有效地进行管理。

在HTML表单中使用具有非唯一ID的两个元素

1 个答案: