Prevent page from submit on Refresh in PHP

If the form is already submitted and the user tries to refresh the webpage then the browser will attempt to resubmit the form.
If you are allowing the user to fill and submit the form for insert data. In this case, if the user refreshes the page then the data is reinserted on the MySQL database table if some action does not perform for preventing it.
In this tutorial, I show you some ways by using which you can avoid the page resubmit.

1. HTML Form

In the demonstration, I am using the following <form> which have 4 input fields and a button.
<form method='post' action=''>
  <input type='text' placeholder='Enter username' name='txt_uname' id='txt_uname' ><br/>
  <input type='text' placeholder='Enter First name' name='txt_fname' id='txt_fname' ><br/>
  <input type='text' placeholder='Enter Last name' name='txt_lname' id='txt_lname' ><br/>
  <input type='text' placeholder='Enter email' name='txt_email' id='txt_email' ><br/>
  <input type='submit' value='Submit' id='submit' name='submit'>
</form>

2. Redirect the user to another page

Simply redirect the user to another page after the form successfully submitted.
Example
<?php 
include 'config.php'; // Database connection

if(isset($_POST['submit'])){
  $uname = $_POST['txt_uname'];
  $fname = $_POST['txt_fname'];
  $lname = $_POST['txt_lname'];
  $email = $_POST['txt_email'];

  // Insert record
  $insert_query = "INSERT INTO 
                 users(username,fname,lname,email) 
                 VALUES('".$uname."','".$fname."','".$lname."','".$email."')";
  mysqli_query($con,$insert_query);

  // Redirect to another page
  header('location: home.php');
}
?>

3. Check entry in MySQL Database Table

Here, you can do two things –
  • Check the unique value in a field
  • Check all submit values in MySQL

Check the unique value in a field

Create a field in your table which only stores unique value e.g. username, email, etc on each page submit. Check the submit value in this field if it’s not found then insert the record.
Example
<?php 
include 'config.php'; // Database connection

if(isset($_POST['submit'])){
  $uname = $_POST['txt_uname'];
  $fname = $_POST['txt_fname'];
  $lname = $_POST['txt_lname'];
  $email = $_POST['txt_email'];

  // Check username is exists or not
  $query = "SELECT count(*) as allcount FROM users WHERE username='".$uname."'";
  $result = mysqli_query($con,$query);
  $row = mysqli_fetch_array($result);
  $allcount = $row['allcount'];

  // insert new record
  if($allcount == 0){
    $insert_query = "INSERT INTO 
       users(username,fname,lname,email) 
       VALUES('".$uname."','".$fname."','".$lname."','".$email."')";
    mysqli_query($con,$insert_query);
  }
 
}
?>

Check all submit values in MySQL

You can either check all submitted values exists in the MySQL database table if not then insert a new record.
Example
<?php 
include 'config.php'; // Database connection

if(isset($_POST['submit'])){
  $uname = $_POST['txt_uname'];
  $fname = $_POST['txt_fname'];
  $lname = $_POST['txt_lname'];
  $email = $_POST['txt_email'];

  // Check username is exists or not
  $query = "SELECT count(*) as allcount FROM users 
          WHERE username='".$uname."' && fname='".$fname."' && 
          lname='".$lname."' && email='".$email."'";
  $result = mysqli_query($con,$query);
  $row = mysqli_fetch_array($result);
  $allcount = $row['allcount'];

  // insert new record
  if($allcount == 0){
     $insert_query = "INSERT INTO 
        users(username,fname,lname,email) 
        VALUES('".$uname."','".$fname."','".$lname."','".$email."')";
     mysqli_query($con,$insert_query);
  }
 
}
?>

4. With AJAX

You can use AJAX to save data and you can either reload the page or not on successful callback.
PHP (saveData.php)
<?php 
include 'config.php'; // Database connection

$uname = $_POST['username'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];

$insert_query = "INSERT INTO 
                 users(username,fname,lname,email) 
                 VALUES('".$uname."','".$fname."','".$lname."','".$email."')";
mysqli_query($con,$insert_query);
echo 1;
?>
 
jQuery

$(document).ready(function(){

  $("#submit").click(function(){
    var username = $("#txt_uname").val();
    var fname = $("#txt_fname").val();
    var lname = $("#txt_lname").val();
    var email = $("#txt_email").val();
 
    $.ajax({
       url:'saveData.php',
       type:'post',
       data:{username:username,fname:fname,lname:lname,email:email},
       success:function(response){
          location.reload(); // reloading page
       }
    });
 
  });
});

5. Conclusion

I showed you some of the ways by using it you can prevent the page from resubmitting. You can use any of the methods on your webpage.
If you found this tutorial helpful then don't forget to share.
 
 

 

 

 

 

CONVERSATION

0 Comments:

Post a Comment

Back
to top