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

Question

当我提交表单时，我想显示一个 jquery 对话框（不是警报），显示特定时间的成功消息，然后它应该在该时间后重定向到新页面 over.Please 不要将这个问题标记为重复，我知道这个问题之前已经回答过但是 none 给了我想要的结果。这是我的 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();
?>

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

To display a popup for specific time and then redirect to another page using php

html

javascript

php

jquery

submit