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 into 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.
Contents
1. HTML Form
In the example, I am using the following <form> that has 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 is 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
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 that 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 a 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.