要显示特定时间的弹出窗口，然后使用php重定向到另一个页面

Question

When I submit the form ,I want to display a jquery dialog(not alert) showing success message for a specific time and then it should redirect to a new page after that time is over.Please don't mark this question as duplicate,I know this question has been answered before but none of them gives me the desired result. Here is my html code-

<form action="submit.php" method="POST">
Name:<input type="name" id="name" />
Age:<input type="age" id="age" />
<input type="submit" name="save" />
</form>

Here is my submit.php code-

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

I have tried onsubmit=popup(); ,but this does not gives me confirmation that the form has been submitted.

function popup(){
    $("#mess").dialog({});
    setTimeout(wait, 3000);   
   }

Thanks in advance.

Answer 1

This might get you started:

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>

---

If you wish to display a confirmation message AFTER the form was submitted, your code should look like this:

$('#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>

And your PHP would now be:

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

</div>