in my html website i have few questions where each questions have radio buttons as answers, i want the user to proceed to next question only when he selects any radio button of the question, i did the following code:
$('div.question').hide().first().show();
$('a.display').on('click', function(e) {
e.preventDefault();
var that = $('div.question:visible'),
t = $(this).text();
if (t == 'next' && that.next('div.question').length > 0) {
if ($('input[type=radio]:checked').length > 0) {
$('div.question').hide();
that.next('div.question').show()
} else {
alert("Please Select an Option !");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I try to be with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q1" value="1" type="radio">
<input class="form-check-input" name="q1" type="radio" value="2">
<input class="form-check-input" name="q1" type="radio" value="3">
<input class="form-check-input" name="q1" type="radio" value="4">
</div>
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I am sincere with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q2" value="1" type="radio">
<input class="form-check-input" name="q2" type="radio" value="2">
<input class="form-check-input" name="q2" type="radio" value="3">
<input class="form-check-input" name="q2" type="radio" value="4">
</div>
</div>
</div>
<a id="display" class="btn btn-info btn-sm display si">next</a>
here this works only for 1st question, after the 1st question, user is able to click next button without checking radio button, can anyone please tell me how to fix this, thanks in advance