Table of Contents
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>
6.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>
7.submit_data.php
ajax के इस्तेमाल से send किये HTML form data को $_POST method से get करके specific table में insert करने के लिए इस file का इस्तेमाल किया है!.
<?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 . "<br>" . $conn->error;
}
echo $msg;
}
?>
its working and useful thank you for sharing