How to stop form resubmission on page refresh

9 comments

1. Instead of …

   } else {
       echo "<p>Your file has been uploaded.</p>";
   }
   

   … redirect to another address on success:

   } else {
   
       $new_url = add_query_arg( 'success', 1, get_permalink() );
       wp_redirect( $new_url, 303 );
       exit;
   }
   

   Status code 303 triggers a GET request:

   This method exists primarily to allow the output of a POST-activated script to redirect the user agent to a selected resource. The new URI is not a substitute reference for the originally requested resource. The 303 response MUST NOT be cached, but the response to the second (redirected) request might be cacheable.

   In your form handler check first if $_GET['success'] is set and its value is 1, then print a success message. The visitor can reload this page again and again – and nothing will be sent.

   Log in to Reply

2. Basically, the general idea is to redirect the user to some other pages after the form submission which would stop the form resubmission on page refresh but if you need to hold the user in the same page after the form is submitted, you can do it in multiple ways.

   Unset Form Data

   One way to stop page resubmission on page refresh is to unset the form data after it is submitted so that the variable storing form data becomes empty and wrap up your form processing block of codes to check if the form is empty.

   if(!empty($_POST) && $_SERVER['REQUEST_METHOD'] == 'POST'){
      $data = // processing codes here
      unset $data;
   }
   

   This will make $data empty after processing and the first clause would stop form resubmission on page refresh.

   Javascript

   This method is quite easy and blocks the pop up asking for form resubmission on refresh once the form is submitted. Just place this line of javascript code at the footer of your file and see the magic.

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

   More on such queries you can visit this link.

   Log in to Reply

3. I had the same problem and it was “complicated” by the fact that I redirect all URLs to a single .php file. It turned out all I had to do to solve it was to insert the following piece of code before any html is written to the page.

   <?php
   if (isset($_POST['mypostvar']) && isset($_SERVER['REQUEST_URI']))
   {
       [process the post data in 'mypostvar']
       header ('Location: ' . $_SERVER['REQUEST_URI']);
       exit();
   }
   ?>
   

   This will redirect to the same page after the postdata is processed as you want it.
   After the redirect the original postdata is vanished and will not trigger the resubmit.
   The function ‘header()’ will only work if you insert it before anything is written to the page.
   exit() is necessary.

   You have to process the post data before you place the header().

   Log in to Reply

4. I solved this my using the template_redirect action (either in a a plugin or on your themes functions.php file).

   add_action('template_redirect','myfunction') ;
   
   function myfunction() { 
     global $post;
     $post_id = $post->ID;
     if ( isset( $_POST['html-upload'] ) && !empty( $_FILES ) ) {
        require_once(ABSPATH . 'wp-admin/includes/admin.php');
        $id = media_handle_upload('async-upload', $post_id); //post id of Client Files page
        unset($_FILES);
        if ( is_wp_error($id) ) {
           $errors['upload_error'] = $id;
           $id = false;
       }
   
     }
     $error = ($errors) ? 1 : 0;
     wp_redirect( "/?p={$post_id}?errors={$error}",301);
   }
   

   Then on your page you can check for errors

   if ($_GET['errors']) {
       echo "<p>There was an error uploading your file.</p>";
   } else {
       echo "<p>Your file has been uploaded.</p>";
   }
   

   (I’ve not tested this code.. it should give you a good starting point).

   Log in to Reply

5. You can also test for $_SERVER['REQUEST_METHOD'] === 'POST' to make sure that the page has been refreshed via POST before processing the form.

   if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
   {
      // Do Stuff
   }
   

   Log in to Reply

6. an easier way is to remove the action from your form and have a hidden action so for example:

   <html>
   <form action="" method="post><input type="text" name="name" />
   <input type="submit" value="Submit" />
   <input type="hidden" name="action" value="Submit" />
   </form>
   </html>
   

   have your controller checking for validity and for submissions so to check if the form was submitted:

   <?php 
   if (isset($_POST['action']) && $_POST['action'] == 'Submit'){
      //you should add code to validate user input here
      //if all ok submit the form
      header('Location: .'); //redirects to the controller without resubmitting
   }
   ?>
   

   this method is very useful for scripts where you are adding or removing records on an admin page as it would reload the page without resubmitting and the record removed or added would be either removed or added to the page 🙂

   Log in to Reply

7. The best method I found is using javascript and css. Common php redirection method header(‘Location: http://www.yourdomain.com/url); will work but It cause warning ” Warning: Cannot modify header information – headers already sent” in different frameworks and cms like wordpress, drupal etc. So my suggestion is to follow the below code

   echo '<style>body{display:none;}</style>'; 
   echo '<script>window.location.href = "http://www.siteurl.com/mysuccesspage";</script>'; 
   exit;
   

   The style tag is important otherwise the user may feel like page loaded twice. If we use style tag with body display none and then refresh the page , then the user experience will be like same as php header(‘Location: ….);

   I hope this will help 🙂

   Log in to Reply

8. Solution 1 :
   If you are inserting post in post type then just generate the random code using rand() php function and save the code while inserting post. Also set the same code in $_POST['uniqueid'] variable.

   Then check on insert if the the current uniqueid is there in posts or not, you can do the same using wp_query().

   Solution 2 :
   Redirect to another page using javascript. But kindly not that user can go back to page and on again it will save post on refresh. For this issue the first solution is best.

   Solution 3 :
   Use ajax to insert post there will be no issues like this. But if you want page hits. It’s not a good idea, may be for Google Adsense.

   I just tried to help by my experience. If anyone need code to fix the problem, simply ask, I will share.

   Log in to Reply

9. the simple and easy way to do this in php.
   example here:

   dont forget the html tags(this form wont allow it here so i use [this])

   $firstname = $post[firstname]
   
   $lastname = $post[lastname]
   
   [form action="here.php" method="post"]
   
   first name[input type='firstname' name='firstname']
   
   last name[input type='text' name='lastname']
   
   [input type=submit value=submit]
   [/form]
   
   if($firstname==""||$lastname=="")
   {
   
   echo"the firstname and lastname are empty";
   
   }
   else
   {
   
   mysql_query("YOUR DATABASE INSERT HERE");
   
   header("Location:here.php");
   
   }
   

   this is how to keep the data enter in the database from posting the same data twice on page refresh

   Log in to Reply