php 提交表单数据后,重定向页面上显示成功消息

pb3skfrl  于 12个月前  发布在  PHP
关注(0)|答案(2)|浏览(110)

我使用Localhost使用Xamp,我已经创建了HTML,CSS 3表单,也创建了一个PHP脚本文件,但当我点击表单提交按钮时,数据被发送到数据库,但表单当前页面被重定向到connect.php,并且在重定向页面上显示消息“新记录插入成功”。
虽然我想显示“新记录插入成功”消息在同一页上,也不希望重定向。
我的html代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Form site</title>
</head>
<body>
    <form method="post" action="connect.php">
        <!-- Existing fields -->
        Cnic: <input type="number" name="cnic_number"><br><br>
        Name: <input type="text" name="name"><br><br>
        FIR No: <input type="text" name="fir_no"><br><br>
        FIR Date: <input type="date" name="fir_date"><br><br>
        Section: <input type="text" name="section"><br><br>
        Police Station: <input type="text" name="police_station"><br><br>
        Address: <textarea name="address"></textarea><br><br>

        <input type="submit" value="Submit">
    </form>
    <!-- Placeholder for success message -->
    <div id="message"></div>
</body>
</html>

PHP代码

<?php
$name = filter_input(INPUT_POST, 'name');
$cnic_number = filter_input(INPUT_POST, 'cnic_number');
$fir_no = filter_input(INPUT_POST, 'fir_no');
$fir_date = filter_input(INPUT_POST, 'fir_date');
$section = filter_input(INPUT_POST, 'section');
$police_station = filter_input(INPUT_POST, 'police_station');
$address = filter_input(INPUT_POST, 'address');

if (!empty($name) && !empty($cnic_number)) {
    $host = "localhost";
    $dbusername = "root";
    $dbpassword = "";
    $dbname = "mysite2";

    // Create connection
    $conn = new mysqli($host, $dbusername, $dbpassword, $dbname);

    if (mysqli_connect_error()) {
        die('Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
    } else {
        // Prepare and execute the SQL query to insert data
        $sql = "INSERT INTO mysite2table (name, cnic_number, fir_no, fir_date, section, police_station, address)
                VALUES ('$name', '$cnic_number', '$fir_no', '$fir_date', '$section', '$police_station', '$address')";

        if ($conn->query($sql)) {
            echo "New record is inserted successfully";
        } else {
            echo "Error: " . $sql . " " . $conn->error;
        }
        $conn->close();
    }
} else {
    echo "cnic number and name should not be empty";
}
?>

我提交数据的时候看截图

提交后,页面被重定向到connect.php,消息也显示在重定向页面上

我的电脑文件夹截图

**注意:**我想在同一页“form.html”上显示“新记录插入成功”消息,也不想页面重定向到connect.php

我希望有人能帮助我,因为我被困在这里,我放弃了

vjrehmav

vjrehmav1#

正如评论者建议的那样,你应该真正阅读AJAX请求,以便能够有效地使用它们。然而,这里有一些基本的代码,应该让你开始。
首先,我们希望保持表单实际提交,而是调用JavaScript函数:

<form method="post" action="connect.php" onsubmit="mySubmitForm(this, 'message'); return false;">

因此,当用户提交表单时,函数mySubmitForm被调用,通过返回false,表单将不会被浏览器提交。
然后我们需要一个JavaScript函数,它从表单中获取所有值,在AJAX请求中将它们提交到表单的action属性中给定的URL,然后将结果显示给用户:

async function mySubmitForm(form, result_container) {
    fetch(form.getAttribute('action'),
    {
        method: "POST",
        body: new FormData(form)
    })
    .then(response => response.text())
    .then(text => document.getElementById(result_container).innerHTML = text)
    .catch(error => console.error(error));
}

差不多就是这样了。然后,您的完整 form.html 将看起来像这样:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Form site</title>
</head>
<body>
    <form method="post" action="connect.php" onsubmit="mySubmitForm(this, 'message'); return false;">
        <!-- Existing fields -->
        Cnic: <input type="number" name="cnic_number"><br><br>
        Name: <input type="text" name="name"><br><br>
        FIR No: <input type="text" name="fir_no"><br><br>
        FIR Date: <input type="date" name="fir_date"><br><br>
        Section: <input type="text" name="section"><br><br>
        Police Station: <input type="text" name="police_station"><br><br>
        Address: <textarea name="address"></textarea><br><br>

        <input type="submit" value="Submit">
    </form>
    <!-- Placeholder for success message -->
    <div id="message"></div>
    <script>
        async function mySubmitForm(form, result_container) {
            fetch(form.getAttribute('action'),
            {
                method: "POST",
                body: new FormData(form)
            })
            .then(response => response.text())
            .then(text => document.getElementById(result_container).innerHTML = text)
            .catch(error => console.error(error));
        }
    </script>
</body>
</html>
vwkv1x7d

vwkv1x7d2#

语句之后,在关闭php标记之前,

header('Location: http://www.yourwebsite.com/');

有时,您的目的地可以在您的网站内,在这种情况下,使用

header('Location: ../folder/file.ext');

其中../folder/file.ext是路径
如果你有很多重定向要做,创建一个函数

function redirect($path){

    header('Location: ' . $path);
}

表头取很多参数...这不是一个完整的解释。
要在重定向后显示邮件,请将邮件置于会话中。别忘了启动它。

$_SESSION['message'] = $message; // to add your value

echo "Your form was submitted successfully. Specific message : " . $_SESSION['message']; // to get your value

相关问题