要顯示特定時間的彈出窗口，然后使用php重定向到另一個頁面

Question

當我提交表單時，我想顯示一個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);   
   }

提前致謝。

Answer 1

這可能會讓您入門：

 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();
?>