'How to validate a form and check if each question is answered?
the questions are saved in database. In order for the users to see the questions, it is looped as well as the answers. (i don't know if I explain this right)
I will provide the whole code for the form, I really don't know what to do with this one. What I am trying to achieve is user cannot click next or submit if the questions are left unanswered. But this code, even if the user is not answering and just clicking next and submit, it will do submit. so it ends up the user can have 0 score which should not be the case.
<form action="applicantAssessmentSave.php" method="post" id="register_form">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label for="finished_degree" style="color:#fff";>Finished Degree</label>
<select class="form-control" name="finished_degree" id="finished_degree" onchange= "handleSelectChange(event)" required>
<option value="" selected disabled >Select your finished degree</option>
<option value="BSIT">BSIT</option>
<option value="BSHM">BSHM</option>
<option value="BSBA">BSBA</option>
</select>
</div>
<script type="text/javascript">
function handleSelectChange(event){
var selectElement = event.target;
var value = selectElement.value;
$.ajax({
url:"degree_job_match.php",
type: "post",
data: {
"value": $('#finished_degree').val(),
},
success:function(data){
}
});
}
</script>
</div>
<?php
$m = 1;
$query = mysqli_query($con, "select * from question_categories") or die(mysqli_error($con));
$count = mysqli_num_rows($query);
while ($row = mysqli_fetch_array($query)) {
$id = $row['id'];
$question = mysqli_query($con, "select * from question where cat_id='".$id."' ") or die(mysqli_error($con));
?>
<fieldset>
<input type="hidden" name="cat_id[]" value="<?php echo $row['id'] ?>">
<div class="card" style="background-color: #fff; " >
<div class="card-body" style="margin-left: 20px;">
<div class="form-check form-check-inline">
<?php
while ($question_row = mysqli_fetch_array($question)) {
?>
<input type="hidden" name="question_id[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="<?php echo $question_row['id'] ?>">
<div class="form-group">
<label style="font-weight: 900;">
<strong>
<?php echo $question_row['question']; ?>
</strong>
</label>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="5" required>
<label class="form-check-label">
Strongly Agree
</label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="4" required>
<label class="form-check-label">
Agree
</label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="3" required>
<label class="form-check-label">
Neutral
</label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="2" required>
<label class="form-check-label">
Disgree
</label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="1" required>
<label class="form-check-label">
Strongly Disagree
</label>
</div>
<br>
</div>
<?php } ?>
</div>
</div>
</div>
<?php if($m!=$count){ ?>
<button name="" id="" class="btn btn-primary next-form btn-sm" type="button" style="background-color: #fff200; color:#000;">
Next
</button>
<?php } if($m!=1){ ?>
<button name="" id="" class="btn btn-warning previous-form" type="button">
Previous
</button>
<?php } ?>
<?php if($m==$count){ ?>
<button class="btn btn-info submit" id="submit_form">
Submit
</button>
<?php } ?>
</fieldset>
<?php
$m++;
}
?>
</form>
UPDATE!!!
I removed the class for the button bootstrap. Now it validates if the option is not selected. Now my problem is, even if the first set of questions are all answered, it cannot go to the next page when button is clicked.
UPDATE 2 I think this is because of this script
$(document).ready(function(){
var form_count = 1, previous_form, next_form, total_forms;
total_forms = $("fieldset").length;
$(".next-form").click(function(){
previous_form = $(this).parent();
next_form = $(this).parent().next();
next_form.show();
previous_form.hide();
setProgressBarValue(++form_count);
});
How will I do now?
Solution 1:[1]
(1) If you want to user cannot submit without answer, you should add required on the radio button. (2) If you want to allow the user submit without answer, I think it's running well. But due to Bootstrap, it should be:
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="5">
<label class="form-check-label">
Strongly Agree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]" value="4">
<label class="form-check-label">
Agree
</label>
</div>
If you have any additional info, please kindly let me know.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Dharman |
