Question

我有以下html表单：

<html>
<body>
<form action="insert.php" method="post">
Firstname: <input type="text" name="firstname" />
Lastname: <input type="text" name="lastname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>

这是.php文件：

<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("my_db", $con);

$sql="INSERT INTO Persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";

mysql_close($con);
?>

如何在提交记录后显示2秒钟的弹出消息，例如“添加记录”

Answer 1

您正在寻找的与PHP无关，因为它是客户端......

有两种方法可以做到这一点：

提交后弹出窗口并在x时间后用javascript ...
使用ajax（javascript）提交表单并解析结果，并在javascript中添加弹出窗口。

Answer 2

尝试以下方法。你也可以加强它。

在您的表单页面上添加用于弹出窗口的CSS

//adduser.php
#popup {
    visibility: hidden; 
    background-color: red; 
    position: absolute;
    top: 10px;
    z-index: 100; 
    height: 100px;
    width: 300px
}

和你的Popup div

//still adduser.php
<div id="popup">
    Record added successfully
</div>

成功后用PHP输出

//still adduser.php - probably at the bottom of the page
<?php
    $recordAdded = false;

    if(isset($_GET['status'] && $_GET['status'] == 1)
       $recordAdded = true;

    if($recordAdded)
    {
     echo '
       <script type="text/javascript">
         function hideMsg()
         {
            document.getElementById("popup").style.visibility = "hidden";
         }

         document.getElementById("popup").style.visibility = "visible";
         window.setTimeout("hideMsg()", 2000);
       </script>';
    }
?>

脚本取消隐藏弹出窗口以显示消息，然后在2秒后隐藏它

您可以使用jQuery和带CSS的div来增强动画

<强>更新

这假设您将包含表单文件的.html更改为.php

//insert.php
if (!mysql_query($sql,$con))
{
  //die('Error: ' . mysql_error());
}
else
{
  // 1 record added
  //if number of rows affected > 0
  header("Location: backtoform.php?status=1"); //redirects back to form with status=1
}

还可以试用评论中提到的建议的jQuery / Ajax方法

使用html表单将记录添加到mysql数据库后显示弹出消息

2 个答案: