点击按钮调用 PHP

Question

I have the following button:

<input type="submit" name="kudos_button" value="★ Give kudos"/>'

And for testing purpose, I made a PHP script like this after the </html> :

<?php
    if(isset($_POST['kudos_button'])){
        $message = "Pressed";
        echo "<script type='text/javascript'>alert('$message');</script>";
        //and then execute a sql query here
    }
?>

It all works fine, when pressing the kudos_button the message shows up. But the problem is that when the user refreshes the page, the message shows up again. And I get the following message:

The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you want to continue?

Any tips how I can avoid this, so the button does not press again when refreshing?

Answer 1

Here is my solution:

<form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
    <input type="submit" name="kudos_button" value="★ Give kudos"/>
</form>

<?php
    if(isset($_POST['kudos_button'])){
        $message = "Pressed";
        echo "<script type='text/javascript'>alert('$message');</script>";
        //and then execute a sql query here
    }
?>

Should be worke fine.

But you should know that PHP works regardless of the alert. Either way, your SQL statement will be executed after the button is pressed.

JavaScript is a Client Based Script and PHP a Server Based Script two different things.

--- EDIT ---

I builded a Function Based PHP Script which is calling the alert and feel for 5 seconds to sleep so the alert can shown up.

Here is my finished solution:

<form name="form1" method="POST" action="./" >
    <input type="submit" name="kudos_button" value="★ Give kudos"/>
</form>

            <?php
                if(isset($_POST['kudos_button'])){
                    session_start();
                    $_SESSION["Button_onClick"] = 1;
                    $message = "Pressed";
                    if ($_SESSION["Button_onClick"] == 1) {
                        Button_onClick();
                        $_SESSION["Button_onClick"] = 0;
                        if ($_SESSION["Button_onClick"] == 0) {
                            BackLoop();
                        }
                    }
                }
                
                Function Button_onClick(){
                    $message = "Pressed";
                    echo ("
                        <script type='text/javascript'>
                            alert('$message');
                        </script>
                    ");
                    SQL_Statement();
                }
                
                Function SQL_Statement() {
                    //and then execute a sql query here
                }
                
                Function BackLoop() {
                    session_destroy();
                    echo("
                        <script>
                            setTimeout(function () {
                                //Redirect with JavaScript
                                window.location.href= './';
                            }, 5000);
                        </script>
                    ");
                }
            ?>

Just in case for that someone have questions. I added the setTimeout function so I could see the changes on the website. If you don't want any infos after the alert (user case), you can delete the function. You only need window.location.href= './'; .

Answer 2

If you don't want to navigate to a new page, then you can't use a regular form submission.

Make the HTTP request with JavaScript instead.

eg

const form = document.querySelector("form");
const responseHandler = response => response.json();
const dataHandler = data => {
    alert(data.message);
};
const submitHandler = event => {
    event.preventDefault()
    const data = new FormData(form);
    const url = "/path/to/dedicated/webservice/that/returns/json";
    fetch(url, { method: "POST", body: data }).then(responseHandler).then(dataHandler);
};
form.addEventListener("submit", submitHandler);

MDN has a guide on using fetch .

Then your server-side code would look something like:

<?php
// Execute a sql query here

header("Content-Type: application/json");
$message = "Pressed";
echo json_encode( [ message => $message ] );