![](/img/trans.png)
[英]how to show div after clicking submit button for few seconds then disappear?
[英]How to delay input submit button in a few seconds before submit
我有一个模式,该模式具有学生将选择的目的列表,单击确认后,它将自动重定向成功消息页面,是否有一种方法可以延迟输入类型提交,我想在几秒钟内向学生显示他选择的内容并重定向到成功消息。
这是模态形式:
<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");
}
}
?>
valid.php是成功消息,希望您能对我有所帮助。 谢谢
您可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.