Submit Form Without Page Refresh in PHP Using Ajax And jQuery

Submit Form Without Page Refresh in PHP Using Ajax And jQuery - Tuts Make

Submit form and insert data into MySQL database in php using jquery ajax. In this tutorial, you will learn how to submit form and insert data into MySQL database without refresh and reload page in PHP using jQuery ajax.

This submit form without refreshing the page using ajax example will show you how to submit form and insert data to MySQL database without refresh and reload web page in PHP using AJAX + jQuery.

PHP jQuery Ajax Submit Form Without Page Refresh

  • Step 1- Create Database Connection File
  • Step 2 – Create HTML Form
  • Step 3 – Create Store Data In DB File
  • Step 4 – Test This App

Step 1- Create Database Connection File

In this step, you will create a file name db.php and add the below code into your file.

<?php
    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "my_db";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");
      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
        }
?>

Note that :- The above code is used to create a MySQL database connection in PHP. When you insert form data into MySQL database, there you need include this file:

Step 2 – Create HTML Form

In this step, you need to create an simple html form and implement jquery ajax code. So add the below code into your ajax-form.php file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to submit a form without refreshing the page using jquery ajax - Tutsmake.com</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-offset-2">
<div class="page-header">
<h2>jQuery Ajax Form Submit Example In PHP</h2>
</div>
<p>Please fill all fields in the form</p>
<p id="show_message" style="display: none">Form data sent. Thanks for your comments.We will update you within 24 hours. </p>
<span id="error" style="display: none"></span>
<form action="javascript:void(0)" method="post" id="ajax-form">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" value="" maxlength="50" >
</div>
<div class="form-group ">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" value="" maxlength="30" >
</div>
<div class="form-group">
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" class="form-control" value="" maxlength="12" >
</div> 
<input type="submit" class="btn btn-primary" name="submit" value="submit">
</form>
</div>
</div>    
</div>
<script type="text/javascript">
$(document).ready(function($){
// hide messages 
$("#error").hide();
$("#show_message").hide();
// on submit...
$('#ajax-form').submit(function(e){
e.preventDefault();
$("#error").hide();
//name required
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
// email required
var email = $("input#email").val();
if(email == ""){
$("#error").fadeIn().text("Email required");
$("input#email").focus();
return false;
}
// mobile number required
var mobile = $("input#mobile").val();
if(mobile == ""){
$("#error").fadeIn().text("Mobile number required");
$("input#mobile").focus();
return false;
}
// ajax
$.ajax({
type:"POST",
url: "project_folder_name/ajax-form-save.php",
data: $(this).serialize(), // get all form field value in serialize form
success: function(){
$("#show_message").fadeIn();
//$("#ajax-form").fadeOut();
}
});
});  
return false;
});
</script>
</body>
</html>

Step 3 – Create Store Data In DB File

Create a new file name ajax-form-save.php and update the below code into your ajax-form-save.php file.

<?php
require_once "db.php";
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$mobile = mysqli_real_escape_string($conn, $_POST['mobile']);
if(mysqli_query($conn, "INSERT INTO customers(name, email, mobile) VALUES('" . $name . "', '" . $email . "', '" . $mobile . "')")) {
echo '1';
} else {
echo "Error: " . $sql . "" . mysqli_error($conn);
}
mysqli_close($conn);
?>

The Above code is used to store form data into a MySQL database table name customers. If form successfully submitted to the database, it will return success message otherwise it returns an error.

Step 4 – Test This App

Open your browser and test this app.

Conclusion

Submit and insert form data into db without refreshing page in php using jquery ajax In this tutorial, you have learned how to submit and insert form data into a MySQL database without reloading or refreshing the whole web page with client-side validation.

Leave a Reply

Your email address will not be published.