Data not catching in multi step contact form
Posted By: Anonymous
In my database I have multi exam papers, for each paper, there are some multiple-choice questions that users have to answer. I use a multi-step form and put every question in one step.
I want to catch user answers but, I am unable to post their answers on the results.php page, please help.
/* Here is the HTML form Code*/
<form id="regForm" action="results.php">
<?php
if(!empty($_GET['id'])){
$id = $_GET['id'];
$fetchtarget = mysqli_query($conn, "select * from exam_paper where examPaperID= '$id' ");
$row= mysqli_fetch_assoc($fetchtarget);
$fetchquestion = mysqli_query($conn, "select * from question where examPaperID= '$id' ORDER BY questionID ");
while($row1= mysqli_fetch_assoc($fetchquestion)){
?>
<!-- One "tab" for each step in the form: -->
<div class="tab"><?php echo $row1["question_statment"]; ?> <br>
<section>
<?php
$fetchchoices = mysqli_query($conn, "select * from choice where questionID= '".$row1["questionID"]."' ORDER BY choiceID ");
while($row2= mysqli_fetch_assoc($fetchchoices)){
?>
<div class="radio-container">
<input type="radio" name="options" id="options" value="<?php echo $row2["choiceStatment"]; ?>" oninput="this.className = ''" required>
<label>
<?php echo $row2["choiceStatment"]; ?>
</label>
</div>
<?php
}
?>
</section>
<?php
if(!empty($_SESSION['position'])){
if($_SESSION['position']=="Admin"){
?>
<table>
<tr>
<td>
<li>
<label for="Name" class="col col-10"><b>
<a href="./process/updatequestion.php?id=<?php echo $row1['questionID']; ?>" alt="update the question" ype="button" class="btn btn-default" data-toggle="modal" data-target="#updatequestionModal" >
<font>update</font>
</a>
</label>
</li>
</td>
<td>
<li>
<label for="Name" class="col col-10"><b>
<a href="./process/deletequestion.php?id=<?php echo $row1['questionID']; ?>" alt="delete the question" type="button" class="btn btn-default" data-toggle="modal" data-target="#deletequestionModal" >
<font color="red">x</font>
</a>
</label>
</li>
</td>
</tr>
</table>
<?php
}
}
?>
</div>
<?php
}
?>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<?php
$sqltotalquestion= mysqli_query($conn, "select * from exam_paper where examPaperID ='".$_GET['id']."' ");
$rowtotal= mysqli_fetch_assoc($sqltotalquestion);
for($i=0; $i<$rowtotal['totalQuestion']; $i++){
?>
<span class="step"></span>
<?php
}
?>
</div>
<?php
if(!empty($_SESSION['position'])){
if($_SESSION['position']=="Admin"){
?>
<table>
<tr>
<td>
<li>
<label for="Name" class="col col-10"><b>
<a href="./process/addQuestion2Choices.php?id=<?php echo $id; ?>" type="button" class="btn btn-default" data-toggle="modal" data-target="#addquestionModal1" >
<font>Add Question with 2 options</font>
</a>
</label>
</li>
</td>
<td>
<li>
<label for="Name" class="col col-10"><b>
<a href="./process/addQuestion4Choices.php?id=<?php echo $id; ?>" type="button" class="btn btn-default" data-toggle="modal" data-target="#addquestionModal2" >
<font>Add Question with 4 options</font>
</a>
</label>
</li>
</td>
</tr>
</table>
<?php
}
}
?>
<?php
}
else{
?>
<table>
<tbody>
<th>
<td><img src="images/notice.png" width="80" height="80" alt="#"></td>
<td valign="center" >
<h2><font color="Green"></n><br/> Please Select Exam Paper To Start </font></h2>
</td>
</th>
</tbody>
</table><br />
<?php
}
?>
</form>
/*Here is th JS Code */
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm(currentTab)) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm(currentTab) {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
switch(currentTab){
case 0:
if(x[currentTab].querySelectorAll('input[name="options"]:checked').length < 1)
{
alert("Must check some thing!");
return false
}else{
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return true;
break;
case 1:
if(x[currentTab].querySelectorAll('input[name="options"]:checked').length < 1)
{
alert("Must check some thing!");
return false
}
else{
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return true;
break;
case 3:
if(x[currentTab].querySelectorAll('input[name="options"]:checked').length < 1)
{
alert("Must check some thing!");
return false
}
else{
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return true;
break;
default:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
}
// A loop that checks every input field in the current tab:
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
/* Here is results.php */
where I supposed to receive user answers but, It doesn’t work.
if(isset($_POST['Submit'])){
// action here
}
Solution
I can’t believe I missed this the first time. You’re missing the method="post" from your <form> tag. HTML form methods default to get.
I’m not seeing where there is a <input> of Submit. If that’s your next button, that won’t work. If you want to test for form submission, you could simply do if (isset($_POST) && count($_POST)>0) {, but since you probably need to pass the exam_id ($_GET[‘id’]), you might put this right after the opening <form> tag:
<input type='hidden' name='exam_id' value='<?php echo $_GET['id'];?>' />
Then you can have this in result.php
if ($_POST['exam_id']) {
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
