Radio Button
- <form id="form-reset">
@csrf
<input type="hidden" id="questionId" value="{{$data->id}}">
<div class="btn btn-group-toggle d-flex flex-column" id="radioDiv"
data-toggle="buttons">
<label class="btn btn-secondary mb-2">
<input type="radio" name="options" id="option_a1" class="answer-check-box"
data-value="1"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option_a2" class="answer-check-box"
data-value="2"> NO
</label>
</div>
</form>
JS code
function clearRads() {
var radList = document.getElementsByName("options");
for (var i = 0; i < radList.length; i++) {
if (radList[i].checked) {
document.getElementById(radList[i].id).checked = false;
}
}
}
Ajax Success Function
success: function(response) {
// console.log(response.data);
timeReset();
let theInput = document.getElementById('questionId');
if (response.data && !(response.data.correct_answer == 0)) {
clearRads();
theInput.value = response.data.id;
$('#question').html(response.data.question);
} else {
$('#quesDiv1').html('<h4 class="text-center">Please Wait</h4>');
}
}
The problem is that when I call this clearRads() this will not reset the value. This function returns the undefined when i console.log this function. thanks in advance. Please guide me i will be thankful.
Your clearRads() function needs a bit of work.
So instead of what you have, I think this should do the trick:
function clearRads() {
var radList = document.getElementsByName("options");
for (var i = 0; i < radList.length; i++) {
radList[i].checked = false;
}
}
}
No need for an if check if you're clearing all checks. Also no need for document.get... since you already have those elements in the array.
Let me know how that goes.