javascript - 多步联系表格中未捕获数据

问题描述

在我的数据库中，我有多份试卷，对于每份试卷，用户必须回答一些多项选择题。我使用多步骤表格，将每个问题都放在一个步骤中。

我想捕捉用户的答案，但是我无法在 results.php 页面上发布他们的答案，请帮忙。

/* 这里是 HTML 表单代码 */

<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>

/*这里是 JS 代码 */

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";
    }

/* 这是 results.php */ 我应该接收用户答案的地方，但是它不起作用。

if(isset($_POST['Submit'])){
    // action here
}

标签： javascriptphphtml

我不敢相信我第一次错过了这个。您缺少标签中method="post"的。<form>HTMLform方法默认为get.

我没有看到哪里<input>有Submit. 如果那是您的下一个按钮，那将不起作用。如果你想测试表单提交，你可以简单地做if (isset($_POST) && count($_POST)>0) {，但由于你可能需要通过考试 ID ($_GET['id'])，你可以把它放在开始<form>标签之后：

<input type='hidden' name='exam_id' value='<?php echo $_GET['id'];?>' />

然后你可以在 result.php 中有这个

if ($_POST['exam_id']) {

javascript - 多步联系表格中未捕获数据

问题描述

解决方案

推荐阅读