Linked Questions

Popular Questions

Using two elements with non-unique id in HTML form

Asked by At

I have a form that I am reusing but the labels are in different languages.

Essentially, a user picks the language from a dropdown and the labels are displayed based on the choice.

However, I have noted since I am reusing the same ids, it's failing and giving warnings 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>

So when I select the swahili drop down I get an error on the browser. Found 2 elements with non-unique id #businessId

I guess this is because I am using the same fields apart from the labels.

I need to keep it this way because it's only the labels that are being changed on selection.

Anyone?

Related Questions