Good Evening,
I have a problem with the jquery form repeater plugin and bootstrap.
I have this form element witch is part of the repeater form:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="questionSwitch" name="question_correct[]">
<label class="custom-control-label" for="questionSwitch">Richtige Antwort</label>
</div>
Now is the problem if the repeater repeat this element and I click on the second or third repeated item on the switch the switch on the first item get changed not the one I clicked. Because they all three have the same id.
Does anyone have an idea how to fix this? Its the first time working with the form repeater.
Here is a bit more of the Code
$(function () {
'use strict';
if (!$('#multiple-choice').attr('checked')) {
$('#questions').hide();
}
$('#multiple-choice').on('click', function () {
if (this.checked)
$('#questions').show();
else $('#questions').hide();
});
// form repeater jquery
$('#whitelist-new-question').repeater({
show: function () {
$(this).slideDown();
// Feather Icons
if (feather) {
feather.replace({ width: 14, height: 14 });
}
},
hide: function (deleteElement) {
if (confirm('Möchten Sie diese Antwort wirklich löschen?')) {
$(this).slideUp(deleteElement);
}
}
});
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.1.2/jquery.repeater.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<div class="card">
<div class="card-body">
<form class="form form-vertical" action="{{ route('whitelist-new-question') }}" method="post"
id="whitelist-new-question">
<div class="row">
@csrf
<div class="col-12">
<div class="form-group">
<label for="question-title">Titel</label>
<input type="text" class="form-control" id="question-title" name="questionTitle"
value="{{ old('questionTitle') }}" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="question-required"
name="questionRequired" value="1"
{{ old('questionRequired') == '1' ? 'checked' : '' }}>
<label class="custom-control-label" for="question-required">Immer Fragen</label>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="multiple-choice" name="multiChoice"
value="1" {{ old('multiChoice') == '1' ? 'checked' : '' }}>
<label class="custom-control-label" for="multiple-choice">Multiple Choice</label>
</div>
</div>
</div>
<div class="col-12" id="questions">
Antworten
<hr />
<div data-repeater-list="questions">
<div data-repeater-item>
<div class="row d-flex align-items-end">
<div class="col-md-4 col-12">
<div class="form-group">
<label for="question-text">Text</label>
<input type="text" class="form-control" id="question-text"
name="question_text[]" aria-describedby="question-text" />
</div>
</div>
<div class="col-md-2 col-12 mt-auto mb-auto">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="currect-switch"
name="question_correct[]">
<label class="custom-control-label" for="currect-switch">Richtige
Antwort</label>
</div>
</div>
<div class="col-md-2 col-12 mb-50">
<div class="form-group">
<button class="btn btn-outline-danger text-nowrap px-1" data-repeater-delete
type="button">
<i data-feather="x" class="mr-25"></i>
<span>Löschen</span>
</button>
</div>
</div>
</div>
<hr />
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-icon btn-primary" type="button" data-repeater-create>
<i data-feather="plus" class="mr-25"></i>
<span>Weitere Antwort</span>
</button>
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success mt-2">Speichern</button>
</div>
</div>
</form></div></div>Ok i got a fix for that. in the js script i created a variable number and added this code in the show event of the repeater:
show: function () {
var inputSwitch = $(this).find('.custom-control-input');
var labelSwitch = $(this).find('.custom-control-label');
var id = 'currect-switch-' + number;
inputSwitch.attr("id", id);
labelSwitch.attr("for", id);
$(this).slideDown();
// Feather Icons
if (feather) {
feather.replace({ width: 14, height: 14 });
}
number++;
},