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

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

本文关键字：重定向 php 另一个 然后 定时间 窗口 显示      更新时间：2023-09-26

当我提交表单时，我想要显示一个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();
?>
相关文章：