Home >> PHP MySql Ajax >> Register Form Submit in PHP MySql Ajax

Register Form Submit in PHP MySql Ajax

Following steps to Register Form Submit using PHP MySQL using Ajax:
Step 1: Create Register table.
Step 2: Create DB Connection.
Step 3: Create Html Form For Display Register Form.
Step 4: Save data by Register form.
 
Step 1:
Run the following sql query to create database and table:

CREATE DATABASE education;
CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(150) COLLATE utf8_unicode_ci NOT NULL,
 `mobile` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `password` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Step 2:
Create database connection file named dbconnection.php

<?php
     $dbservername='localhost';
     $dbusername='root';
     $dbpassword='';
     $dbname = "education";
     $conn=mysqli_connect($dbservername,$dbusername,$dbpassword,$dbname);
     if(!$conn){
         die('Could not Connect MySql Server:' .mysql_error());
     }
?>

Step 3:
Create Html Form For Display Register Form.

<!doctype html>  

<html>  
<head>  
<title>Register Form</title>   
</head>  
<body>  
<h3>Register Form</h3>  
<form action="" id="registerForm" method="POST" onsubmit="return false">  
      <div id="resultMessage"></div>     
      <div class="form-group">
         <label for="Name">Name</label>
         <input type="text" name="name" id="name" class="form-control">   
      </div>
      <div class="form-group">
         <label for="Email">Email</label>
         <input type="text" name="email" id="email" class="form-control">   
      </div>
      <div class="form-group">
         <label for="Mobile No.">Mobile No.</label>
         <input type="text" name="mobile" id="mobile" class="form-control">   
      </div>
      <div class="form-group">
         <label for="Password">Password</label>
         <input type="password" name="password" id="password" class="form-control">   
      </div>
      <div class="form-group">
         <input type="submit" name="submit" id="submit" value="Submit" class="form-control">   
      </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#registerForm').on('submit', function() {
       var name = $('#name').val();
       var email = $('#email').val();
       var mobile = $('#mobile').val();
       var password = $('#password').val();
       $.ajax({
           type: 'POST',
           url: "save-register.php",
           dataType: 'html',
           data: "name="+name+"&email="+email+"&mobile="+mobile+"&password="+password,
           success: function(response) {
               if (response == "yes") {
                   $('#resultMessage').html("Your register form submit successfully");
               } else if (response == "no") {
                   $('#resultMessage').html("Your register form not saved");
               }
           }
       });
    });
});
</script>  
</body>  
</html> 

Step 4: 
Now, Save data by file named save-register.php

<?php

      require_once "dbconnection.php";
      $name = $_POST["name"];
      $email = $_POST["email"];
      $mobile = $_POST["mobile"];
      $password = $_POST["password"];
      $query="insert into users(name,email,mobile,password)values('".$name."','".$email."','".$mobile."','".$password."')";
      $result = mysqli_query($conn,$query);
      if($result){
           echo 'yes';
      } else {
            echo 'no';
      }
?>

Post Your Comment

Next Questions
Login Form Submit
Enquiry Form Submit
Subscribe Form Submit
How to Upload File
How to Upload Multiple Files
How to Upload Image
How to Upload Multiple Image
Image Crop and Save into Database

Copyright ©2022 coderraj.com. All Rights Reserved.