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?
style="visibility: hidden;"