Question

我有一个模式，其中包含学生可以选择的目的列表，单击确认后，它将自动重定向成功消息页面，有没有办法延迟我要显示给学生的输入类型提交他在几秒钟内选择了什么，然后重定向到成功消息。

这是模态形式：

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered  modal-notify modal-info modal-sm"role="document">
<div class="modal-content">
            <div class="modal-header  d-flex justify-content-center">
                 <p class="heading">Your Purpose ?</p>
            </div>
            <div class="modal-body">
           <form method="post" action="index111.php">

<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="purpose1" name="purpose" value="Assignment">
  <label class="custom-control-label" for="purpose1">Assignment</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="purpose2" name="purpose" value="Reading">
  <label class="custom-control-label" for="purpose2">Reading</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="purpose3" name="purpose" value="Research">
  <label class="custom-control-label" for="purpose3">Research</label>
</div>  
            <div class="modal-footer flex-center">  

                <button type="submit"  name="submit02" id="modal_button" class="btn btn-primary">Confirm</button>
            </div>
            </form>
        </div>
    </div>
</div>

这是index111.php中的代码：

<?php
 session_start();
 include_once ('connection.php');
if(isset($_POST['submit02']))
{
$time=date("H:i:s");
$purpose = $_POST['purpose'];
$sql = mysqli_query($conn,"select * from student_att  order by number DESC limit 1");
while( $row = mysqli_fetch_array($sql)) {
                  $rfid=$row['rfid_num'];
        $InsertSql = "Update student_att set purpose = '$purpose' , timein = '$time' where rfid_num='$rfid' order by number DESC limit 1";
        $res = mysqli_query($conn, $InsertSql);  
            header("location:valid.php");
             }
    }     
?>

validate.php是成功消息，希望您能对我有所帮助。谢谢

Answer 1

您可以使用类似jquery的功能来做到这一点：

$('#myform').submit(function(event) {
  var form = this;
  event.preventDefault();
  $('.modal-body').append('You chose an option: '+$("input[name=purpose]:checked").val());
  setTimeout( function () {
        form.submit();
  }, 5000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered  modal-notify modal-info modal-sm"role="document">
<div class="modal-content">
            <div class="modal-header  d-flex justify-content-center">
                 <p class="heading">Your Purpose ?</p>
            </div>
            <div class="modal-body">
           <form method="post" action="index111.php" id="myform">

<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="purpose1" name="purpose" value="Assignment">
  <label class="custom-control-label" for="purpose1">Assignment</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="purpose2" name="purpose" value="Reading">
  <label class="custom-control-label" for="purpose2">Reading</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="purpose3" name="purpose" value="Research">
  <label class="custom-control-label" for="purpose3">Research</label>
</div>  
            <div class="modal-footer flex-center">  

                <button type="submit"  name="submit02" id="modal_button" class="btn btn-primary">Confirm</button>
            </div>
            </form>
        </div>
    </div>
</div>

如何在提交前几秒钟延迟输入提交按钮

1 个答案: