jQuery AJAX Form Submit PHP MySQL

jQuery AJAX Form Submit PHP MySQL

Simple jquery ajax form submit in PHP and MySQL with validation. Here you will learn how to create and submit simple ajax form in PHP, and how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

Here you will learn how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

This tutorial helps you step by step for creating or submit ajax form in PHP with MySQL DB. When we store a form of data into MySQL database after that we will show a success message for the user. The message looks like “Your form has been successfully submitted using ajax in PHP with MySQL DB”.

jQuery AJAX Form Submit In PHP With MySQL Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

  • First Create a Database Connection File
  • Create An Ajax Form in PHP
  • Create An Ajax Data Store File

First of all, go to your PHPMyAdmin and create a table name customers with the following fields: name, email, mobile.

1. First Create a Database Connection File

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

The below code is used to create a MySQL database connection in PHP. When we insert form data into MySQL database, there we will include this 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());
		}
?>

2. Create An Ajax Form in PHP

In this step, you need to create an ajax form and update the below code into your ajax-form.php file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to send data to MySQL with AJAX + jQuery + PHP | 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>

3. Create Ajax Form PHP File

Now we will create a new file name ajax-form-store.php and update the below code into your ajax-form-store.php file.

The below 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.

<?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);

?>

Conclusion

In this tutorial, you have learned how to create and submit ajax form and store data into a MySQL database without reloading or refreshing the whole web page with client-side validation.

If you have any questions or thoughts to share, use the comment form below to reach us.

Leave a Reply

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