How to prevent form resubmission when page is refreshed (F5 / CTRL+R)

后端 未结 23 1308
醉话见心
醉话见心 2020-11-22 00:46

I have a simple form that submits text to my SQL table. The problem is that after the user submits the text, they can refresh the page and the data gets submitted again with

相关标签:
23条回答
  • 2020-11-22 01:33

    Just redirect it to the same page after making the use of form data, and it works. I have tried it.

    header('location:yourpage.php');
    
    0 讨论(0)
  • 2020-11-22 01:33

    How to prevent php form resubmission without redirect. If you are using $_SESSION (after session_start) and a $_POST form, you can do something like this:

    if ( !empty($_SESSION['act']) && !empty($_POST['act']) && $_POST['act'] == $_SESSION['act'] ) {
      // do your stuff, save data into database, etc
    }
    

    In your html form put this:

    <input type="hidden" id="act" name="act" value="<?php echo ( empty($_POST['act']) || $_POST['act']==2 )? 1 : 2; ?>">
    <?php
    if ( $_POST['act'] == $_SESSION['act'] ){
        if ( empty( $_SESSION['act'] ) || $_SESSION['act'] == 2 ){
            $_SESSION['act'] = 1;
        } else {
            $_SESSION['act'] = 2;
        }
    }
    ?>
    

    So, every time when the form is submitted, a new act is generated, stored in session and compared with the post act.

    Ps: if you are using an Get form, you can easily change all POST with GET and it works too.

    0 讨论(0)
  • 2020-11-22 01:34

    After inserting it to database, call unset() method to clear the data.

    unset($_POST);

    To prevent refresh data insertion, do a page redirection to same page or different page after record insert.

    header('Location:'.$_SERVER['PHP_SELF']);

    0 讨论(0)
  • 2020-11-22 01:37

    When the form is processed, you redirect to another page:

    ... process complete....
    header('Location: thankyou.php');
    

    you can also redirect to the same page.

    if you are doing something like comments and you want the user to stay on the same page, you can use Ajax to handle the form submission

    0 讨论(0)
  • 2020-11-22 01:39

    I would also like to point out that you can use a javascript approach, window.history.replaceState to prevent a resubmit on refresh and back button.

    <script>
        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }
    </script>
    

    Proof of concept here: https://dtbaker.net/files/prevent-post-resubmit.php

    I would still recommend a Post/Redirect/Get approach, but this is a novel JS solution.

    0 讨论(0)
  • 2020-11-22 01:39

    I found next workaround. You may escape the redirection after processing POST request by manipulating history object.

    So you have the HTML form:

    <form method=POST action='/process.php'>
     <input type=submit value=OK>
    </form>
    

    When you process this form on your server you instead of redirecting user to /the/result/page by setting up the Location header like this:

    $cat process.php
    <?php 
         process POST data here
         ... 
         header('Location: /the/result/page');
         exit();
    ?>
    

    After processing POSTed data you render small <script> and the result /the/result/page

    <?php 
         process POST data here
         render the <script>         // see below
         render `/the/result/page`   // OK
    ?>
    

    The <script> you should render:

    <script>
        window.onload = function() {
            history.replaceState("", "", "/the/result/page");
        }
    </script>
    

    The result is:

    as you can see the form data is POSTed to process.php script.
    This script process POSTed data and rendering /the/result/page at once with:

    1. no redirection
    2. no rePOST data when you refresh page (F5)
    3. no rePOST when you navigate to previous/next page through the browser history

    UPD

    As another solution I ask feature request the Mozilla FireFox team to allow users to setup NextPage header which will work like Location header and make post/redirect/get pattern obsolete.

    In short. When server process form POST data successfully it:

    1. Setup NextPage header instead of Location
    2. Render the result of processing POST form data as it would render for GET request in post/redirect/get pattern

    The browser in turn when see the NextPage header:

    1. Adjust window.location with NextPage value
    2. When user refresh the page the browser will negotiate GET request to NextPage instead of rePOST form data

    I think this would be excelent if implemented, would not? =)

    0 讨论(0)
提交回复
热议问题