Submit a Form without Page Refresh Using Ajax jQuery in PHP MySQL

Hello PHP programmers and developers, How to submit form without page refresh using ajax jquery and PHP MySQL with validation. In this post, i will show you how to submit ajax form without page refresh using ajax jquery and php.

Also in this post, you will learn how to insert data in database using jquery ajax in PHP MySQL with validation. And validate form data using jQuery ajax in PHP MySQL.

Description :- i will create database for store/save ajax form data. Then will create database connecting file and ajax html form. After that, will create store form data into database using jQuery ajax in PHP MySQL with validation.

Also, you can use this code personally and professionally.

How to Submit/Insert Form data Without Refresh/Reloading using Ajax jQuery and PHP

The following javascript/jQuery and ajax code will validate and submit form data without refresh/reloading whole web page:

<script type="text/javascript">
 $(document).ready(function($){
 
    // on submit...
    $('#php-ajax-form').submit(function(e){
 
        e.preventDefault();
 
 
        $("#err-msg").hide();
 
        //name required
        var fname = $("input#fname").val();
        if(fname == ""){
            $("#err-msg").fadeIn().text("First Name required.");
            $("input#fname").focus();
            return false;
        }
 
        // last name
        var lanme = $("input#lname").val();
        if(lanme == ""){
            $("#err-msg").fadeIn().text("Last Name required");
            $("input#lanme").focus();
            return false;
        }

        // email required
        var email = $("input#email").val();
        if(email == ""){
            $("#err-msg").fadeIn().text("Email required");
            $("input#email").focus();
            return false;
        }
 
 
        // ajax
        $.ajax({
            type:"POST",
            url: "ajax-insert-data.php",
            data: $(this).serialize(), // get all form field value in serialize form
            success: function(){
             
              alert('Form Has been submitted successfully using ajax in PHP');
            }
        });
    });  
 
    return false;
    });
</script>

Let’s follow following easy steps to submit form data into database without page refresh using ajax jquery and php:

Step 1 – Requirement and Create Directory

In step 1, Navigate to your local web server directory. And inside this directory, create one directory. And you can name this folder anything.

Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).

Step 2 – Create phpmyadmin MySQL Database and Connecting File

In step 2, you need to create database and table. So run the following sql query to create database and table:

CREATE DATABASE my_db;


CREATE TABLE `customers` (
  `id` int(10) UNSIGNED NOT NULL,
  `fname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `lname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_date` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Then create a php file that named mydbCon. Which is used to connect phpmyadmin mysql database to project (demo).

So, now create mydbCon file and add the below given code into your file:

<?php

    $hName='localhost'; // host name

    $uName='root';   // database user name

    $password='';   // database password

    $dbName = "my_db"; // database name

    $dbCon = mysqli_connect($hName,$uName,$password,"$dbName");

      if(!$dbCon){
          die('Could not Connect MySql Server:' .mysql_error());
      }
?>

Step 3 – Create Ajax HTML Form

In step 3, create a php file that named ajax-form-submit.php. This file will display PHP MySQL ajax form and store form data into MySQL database without refresh whole web page.

Here, i will use jQuery ajax validation with PHP MySQL form. Now, you need to add the following ajax html form code into ajax-form-submit.php file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP Form Submission and Validation Using Ajax and jQuery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 

</head>
<body>

<div class="container mt-2">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h2>PHP MySQL Form Submit using jQuery and Ajax With Validation</h2>
            </div>

            <span id="err-msg" style="display: none"></span>

                <form action="javascript:void(0)" method="post" id="php-ajax-form">
 
                    <div class="form-group">
                        <label>First Name</label>
                        <input type="text" name="fname" id="fname" class="form-control" value="" maxlength="50" >
                    </div>

                    <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" name="lname" id="lname" 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>
 
 
                    <input type="submit" class="btn btn-primary" name="submit" value="submit">
             
                </form>
        </div>
    </div>        
</div>
<script type="text/javascript">
 $(document).ready(function($){
 
    // on submit...
    $('#php-ajax-form').submit(function(e){
 
        e.preventDefault();
 
 
        $("#err-msg").hide();
 
        //name required
        var fname = $("input#fname").val();
        if(fname == ""){
            $("#err-msg").fadeIn().text("First Name required.");
            $("input#fname").focus();
            return false;
        }
 
        // last name
        var lanme = $("input#lname").val();
        if(lanme == ""){
            $("#err-msg").fadeIn().text("Last Name required");
            $("input#lanme").focus();
            return false;
        }

        // email required
        var email = $("input#email").val();
        if(email == ""){
            $("#err-msg").fadeIn().text("Email required");
            $("input#email").focus();
            return false;
        }
 
 
        // ajax
        $.ajax({
            type:"POST",
            url: "ajax-insert-data.php",
            data: $(this).serialize(), // get all form field value in serialize form
            success: function(){
             
              alert('Form Has been submitted successfully using ajax in PHP');
            }
        });
    });  
 
    return false;
    });
</script>
</body>
</html>

Step 4 – Create ajax-insert-data.php File

In step 4, create new file that named ajax-insert-data.php file. Because this is used to store ajax form data into mysql database.

So, add the below code into your ajax-insert-data.php file:

<?php
    include "mydbCon.php";
 
    $fname = mysqli_real_escape_string($conn, $_POST['fname']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $lname = mysqli_real_escape_string($conn, $_POST['lname']);
 
    if(mysqli_query($conn, "INSERT INTO customers(fname, lname, email) VALUES('" . $fname . "', '" . $lname . "', '" . $email . "')")) {
     echo '1';
    } else {
       echo "Error: " . $sql . "" . mysqli_error($conn);
    }
 
?>

The submit form without page refresh using ajax jquery and php will look like in following image:

submit form without page refresh using ajax jquery and php

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *