[英]To display a popup for specific time and then redirect to another page using php
当我提交表单时,我想显示一个jquery对话框(不提醒),显示特定时间的成功消息,然后在该时间结束后将其重定向到新页面。请不要将此问题标记为重复,我知道这个问题已经被回答过了,但是没有一个给我想要的结果。 这是我的html代码-
<form action="submit.php" method="POST">
Name:<input type="name" id="name" />
Age:<input type="age" id="age" />
<input type="submit" name="save" />
</form>
这是我的Submit.php代码-
<?php
include('db.php');
$sql ="INSERT INTO details(`name`) VALUES ('".$_POST["name"]."','".$_POST["age"]."')";
if ($conn->query($sql) === TRUE) {
/*here i want to display the dialog and then redirect to new page i.e.-header('Location:enter.php')*/
header('Location:enter.php');
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
我已经尝试过onsubmit=popup();
,但这并不能使我确认已提交表单。
function popup(){
$("#mess").dialog({});
setTimeout(wait, 3000);
}
提前致谢。
这可能会让您入门:
delayTime = 2000; //milliseconds $('form').submit(function() { $('#myMessage').fadeIn(); setTimeout(function() { $('#myMessage').fadeOut(); }, delayTime); //Submission continues after timeout });
#myMessage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: black; opacity: 0.8; z-index: 999; display: none; } #myMsgDlg { position: relative; top: 50px; width: 60vw; height: 60vh; margin: 0 auto; color: yellow; border: 1px solid orange; overflow: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="myMessage"> <div id="myMsgDlg"> <h3>Any HTML at all can be in here</h3> <img src="http://placekitten.com/300/100" /> </div> <!-- #myMsgDlg --> </div> <!-- #myMessage --> <form action="submit.php" method="POST"> Name: <input type="name" id="name" />Age: <input type="age" id="age" /> <input type="submit" name="save" /> </form>
如果您希望在提交表单后显示确认消息,则代码应如下所示:
$('#submitme').click(function() { var nam = $('#name').val(); var age = $('#age').val(); if (nam == '' || age == '') { alert('Please complete all fields'); } $.ajax({ type: 'post', url: 'submit.php', data: 'nm=' + nam + '&ag=' + age }).done(function(d) { if (d == 'success') { $('#myMessage').fadeIn(); setTimeout(function() { $('#myMessage').fadeOut(); }, 1500, function() { window.location.href = 'enter.php'; }); } else { alert(d); } }); //END done function }); //END submitme.click
#myMessage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: black; opacity: 0.8; z-index: 999; display: none; } #myMsgDlg { position: relative; top: 50px; width: 60vw; height: 60vh; margin: 0 auto; color: yellow; border: 1px solid orange; overflow: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="myMessage"> <div id="myMsgDlg"> <img src="http://placekitten.com/300/150" /> <h3>Any HTML at all can be in here</h3> </div> <!-- #myMsgDlg --> </div> <!-- #myMessage --> <div id="myDiv"> Name: <input type="name" id="name" />Age: <input type="age" id="age" /> <input id="submitme" type="button" /> </div>
现在您的PHP将是:
<?php
include('db.php');
$sql ="INSERT INTO details(`name`) VALUES ('".$_POST["name"]."','".$_POST["age"]."')";
if ($conn->query($sql) === TRUE) {
echo 'success';
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.