Create users table in mysql:

Below is the structure of users table with basic fields. 

 CREATE TABLE `demo`.`users` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(45) NULL,
  `email` VARCHAR(80) NULL,
  `mobile` VARCHAR(50) NULL,
  `bio` TEXT NULL,
  `created_at` DATETIME NULL,
  `updated_at` DATETIME NULL,
  PRIMARY KEY (`id`));


Create Connection(config.php) 

Connect to the database. In config.php add your database name, database username, database password and database name.

<?php
//Database details
$db_host = 'localhost';
$db_username = 'username';
$db_password = 'password';
$db_name = 'database_name';

//Create connection and select DB
$conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

index.php

<!--
Used basic html and bootstrap skeleton from the below link for style purpose which contains bootstrap.css,bootstrap.js,jquery.js
https://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Used bootstrap form elements from below link.
https://www.w3schools.com/bootstrap/bootstrap_forms.asp-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Without Refreshing page Submit a Form with jQuery and Ajax</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <style>
            .error{
                color:red;
                font-size:13px;
            }
            .dn{
                display: none;
            }
            .required{
                color:red;   
            }
        </style>
    </head>
    <body>
        <div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">  
            <div>
                <h2 style="margin-bottom:50px;">Live Demo: Without Refreshing page Submit a Form with jQuery and Ajax</h2>
                <div class="form-group">
                    <label for="email">Name<span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" id="name">
                    <div class="error" id="error_name"></div>
                </div>
                <div class="form-group">
                    <label for="email">Email<span class="required">*</span></label>
                    <input type="text" name="email" class="form-control" id="email">
                    <div class="error" id="error_email"></div>
                </div>
                <div class="form-group">
                    <label for="email">Mobile<span class="required">*</span></label>
                    <input type="text" name="mobile" class="form-control" id="mobile">
                    <div class="error" id="error_mobile"></div>
                </div>
                <div class="form-group">
                    <label for="email">Biography</label>
                    <textarea name="bio" class="form-control" id="bio"></textarea>
                    <div class="error" id="error_bio"></div>
                </div>
                <div class="form-group">
                    <button class="btn btn-success" id="save">Save</button>
                </div>
                <div class="text-success success-message"></div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            var email_validator = /^([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/;
            $(document).on("click", "#save", function () {
                //get value 
                var name = $("#name").val();
                var email = $("#email").val();
                var mobile = $("#mobile").val();
                var bio = $("#bio").val();
                //check if value is not empty
                if (name == "") {
                    $("#error_name").html("Please enter name.");
                    $("#name").focus();
                    return false;
                } else {
                    $("#error_name").html("");
                }
                if (email == "") {
                    $("#error_email").html("Please enter email.");
                    $("#email").focus();
                    return false;
                } else {
                    $("#error_email").html("");
                }
                if (email.match(email_validator)) {
                    $("#error_email").html("");
                } else {
                    $("#error_email").html("Please enter valid email.");
                    $("#email").focus();
                    return false;
                }
                if (mobile == "") {
                    $("#error_mobile").html("Please enter mobile.");
                    $("#mobile").focus();
                    return false;
                } else {
                    $("#error_mobile").html("");
                }
                //Ajax call to send data to the insert.php
                $.ajax({
                    type: "POST",
                    url: "insert.php",
                    data: {name: name, email: email, mobile: mobile, bio: bio},
                    cache: false,
                    success: function (data) {
                        //Clear the values
                        $("#name").val("");
                        $("#email").val("");
                        $("#mobile").val("");
                        $("#bio").val("");
                        $(".success-message").html("Record inserted successfully.");
                    }
                });
            });
        </script>
    </body>
</html>


insert.php

<?php

require_once 'config.php';
if (isset($_POST['email'])) {
    $name = mysqli_real_escape_string($conn, $_POST['name']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $mobile = mysqli_real_escape_string($conn, $_POST['mobile']);
    $bio = mysqli_real_escape_string($conn, $_POST['bio']);
    mysqli_query($conn, "insert into users(name,email,mobile,bio) values ('$name','$email','$mobile','$bio')");
    echo 'success';
} else {
    echo "Message is empty";
}

Written by
Check out this Author's contributed articles.
If you like Tutorialsmint and would like to contribute, you can also write an article using Write an Article. See your article appearing on the Tutorialsmint main page and help other programmers to enhance their knowledge.

Comments(0)

RECENT TUTORIALS
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Edit Post
Add Reply