Found 2 elements with non-unique id. Loading the selected div only to avoid conflict

Posted 3 months ago by bobmyles

I have an option select tag where a user picks the option they want on a drop down.

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

I have noted since I am reusing the same ids, it's failing and giving warnings [DOM] Found 2 elements with non-unique id. The first option loads well but the second option fails to load correctly giving [DOM] Found 2 elements with non-unique id.

Is there a way to disable one based on the selection because I think both are loading the same time hence the conflict?

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

The JavaScript code is as below;

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

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.