Submit form without page refresh using jquery ajax and PHP in Hindi

Table of Contents

1 Introduction
2 Ajax से form data को submit करने के लिए जरुरी steps

Introduction

हेलो दोस्तों आज हम इस post में ajax का इस्तेमाल form data को MySQL database में page को refresh या load किये बिना insert करवाएंगे!. और data successfully database में insert होने के बाद में data insert success का message show करवाएंगे!. जिससे की हमें पता चल सके की form data database में stored हुवे या नहीं!.

Ajax से form data को submit करने के लिए जरुरी steps

create database
config.php
create table
index.php
submit_data.php

1.create database

tables data को manage करने के लिए database की जरूरियात होती है!.

CREATE DATABASE employee;

2.config.php

config.php यह file server यानि database के साथ connection बनाने के लिए है!.

<?php
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname ="employee";  
  $conn = mysqli_connect($servername, $username, $password,$dbname);
?>

3.create table

Specific data row और column के formate में manage करने के लिए database के अंदर एक या एक से ज्यादा table का इस्तेमाल किया जाता है!.

CREATE TABLE registration (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(30) NOT NULL,
lname VARCHAR(30) NOT NULL,
email VARCHAR(50),
mobile VARCHAR(15) NOT NULL UNIQUE,
gender VARCHAR(15),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)

4.index.php

index.php में हम HTML form create करेंगे जो user side frontend साइड show होगा और user इस html form से data को fill करके submit करेगा!.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <form  action='#' method='post' id="formdata">
  <div class="row">  
    <h2>User Registration</h2>
    <div class="success"></div>
    <div class="form-group">
      <label for="">first name: <small></small> </label>
      <input type="text" class="form-control required" name='fname' id='fname'>
    </div>
    <div class="form-group">
      <label for="">last name: <small></small> </label>
      <input type="text" class="form-control required" name='lname' id='lname'>
    </div>             
    <div class="form-group">
      <label>Email id: <small></small> </label>
      <input type='text' name='email' id='email' class="form-control required">
    </div>
    <div class="form-group">
      <label>mobile no: <small></small> </label>
      <input type='text' name='mobile' id='mobile' class="form-control required">
    </div>  
    <div class="form-group">
      <label>Gender: <small></small> </label><br>
      <input type='radio' name="gender" id='gender' value='male' class="required"> Male<br>
      <input type='radio' name="gender" id='gender' value='female' class=""> Female
    </div>
    <div class="form-group">
      <input type='submit' name='submit' value='Save' class="btn btn-primary">
      <input type='reset' name='btn_reset' value='Reset' class="btn btn-primary">          
    </div>                             
  </form>
</div>
<footer>
  <style>
    .success{color:green;}
  </style>
 <script>
    $(document).ready(function() {
        $("#formdata").submit(function(e) {
          e.preventDefault()
            var fname = $("#fname").val();
            var lname = $("#lname").val();
            var email = $("#email").val();
            var mobile = $("#mobile").val();
            var gender = $("#gender").val();
 
            if(fname ==''||lname ==''||email==''||mobile=='' ||gender=='') {
                alert("Please fill all fields.");
                return false;
            }
 
            $.ajax({
                type: "POST",
                url: "submit_data.php",
                data: {
                    fname: fname,
                    lname: lname,
                    email: email,
                    mobile: mobile, 
                    gender:gender
                },
                success: function(data) {                                      
                    $('.success').fadeIn().html(data);
                      setTimeout(function() {
                        $('.success').fadeOut("slow");
                      }, 2000 );
                    $('#formdata')[0].reset();
                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                }
            });
             
        });
 
    });
</script> 
</footer>  
</body>
</html>

5.ajax call के लिए jquery script

<script>
    $(document).ready(function() {
        $("#formdata").submit(function(e) {
          e.preventDefault()
            var fname = $("#fname").val();
            var lname = $("#lname").val();
            var email = $("#email").val();
            var mobile = $("#mobile").val();
            var gender = $("#gender").val();
 
            if(fname ==''||lname ==''||email==''||mobile=='' ||gender=='') {
                alert("Please fill all fields.");
                return false;
            }
 
            $.ajax({
                type: "POST",
                url: "submit_data.php",
                data: {
                    fname: fname,
                    lname: lname,
                    email: email,
                    mobile: mobile, 
                    gender:gender
                },
                success: function(data) {                                      
                    $('.success').fadeIn().html(data);
                      setTimeout(function() {
                        $('.success').fadeOut("slow");
                      }, 2000 );
                    $('#formdata')[0].reset();
                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                }
            });
             
        });
 
    });
</script>

6.submit_data.php

ajax के इस्तेमाल से send किये HTML form data को $_POST method से get करके specific table में insert करने के लिए इस file का इस्तेमाल किया है!.

&lt;?php
  include('confing.php');

  if (isset( $_POST['fname'] ) ) {
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];
    $mobile = $_POST['mobile'];
    $gender = $_POST['gender'];    
    $created_at = date('Y-m-d h:i:s');    

    $sql = " INSERT INTO
            registration (
              fname, 
              lname, 
              email, 
              mobile, 
              gender, 
              created_at 
            )
            VALUES (
              '".$fname."', 
              '".$lname."', 
              '".$email."', 
              '".$mobile."', 
              '".$gender."', 
              '".$created_at."'
            )";
      if ($conn->query($sql) === TRUE) {
        $msg = "New record created successfully";
      } else {
        $msg = "Error: " . $sql . "&lt;br>" . $conn->error;
      }
      echo $msg;            
  }
?>

Submit form without page refresh using jquery ajax and PHP in Hindi
Post Views : 209