Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to insert data in mysql database using ajax in core php?

How to insert data in mysql database using ajax in core php?


File Name : index.php

<!DOCTYPE html>
<html>
<head>
<title>How to insert data in MySQL database using Ajax in PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<div class="alert alert-success alert-dismissible" id="success" style="display:none;">
<a href="#" class="close" data-dismiss="alert" aria-label="close">?</a>
</div>
<form id="frm" name="frm" method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
<div class="form-group">
<label for="pwd">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
<div class="form-group">
<label for="pwd">Phone:</label>
<input type="text" class="form-control" id="mobile" placeholder="Enter Mobile" name="mobile">
</div>
<div class="form-group" >
<label for="pwd">City:</label>
<select name="city" id="city" class="form-control">
<option value="">Select</option>
<option value="Delhi">Delhi</option>
<option value="Bihar">Bihar</option>
<option value="Jharkhand">Jharkhand</option>
</select>
</div>
<input type="button" name="save" class="btn btn-primary" value="Save" id="btnsave">
</form>
</div>

<script>
$(document).ready(function() {
$('#btnsave').on('click', function() {
$("#btnsave").attr("disabled", "disabled");
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var city = $('#city').val();
if(name!="" && email!="" && mobile!="" && city!=""){
$.ajax({
url: "save.php",
type: "POST",
data: {
name: name,
email: email,
mobile: mobile,
city: city
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$("#butsave").removeAttr("disabled");
$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}

}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>
</body>
</html>

Ajax page

File Name : save.php

<?php
include 'database.php';
$name=$_POST['name'];
$email=$_POST['email'];
$mobile=$_POST['mobile'];
$city=$_POST['city'];
$sql = "INSERT INTO `itechxpert`( `name`, `email`, `mobile`, `city`)
VALUES ('$name','$email','$mobile','$city')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>

Database

File Name : database.php

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

Ajax Page

File Name : save.php

<?php
session_start();
require_once("database.php");
// include('../functions/common_functions.php');
$title_english=$_POST['title_english'];
$title_hindi=$_POST['title_hindi'];
$remarks=$_POST['remarks'];
$last_inserted_id = '';
$qry = "select pki_id,draft_no from itechxpert ORDER BY pki_id DESC limit 1";
$res = mysqli_query($sql,$qry);

while($row = mysqli_fetch_array($res)){
$last_inserted_id = $row['pki_id'];


}




if($last_inserted_id == '')
{
$last_inserted_id = $last_inserted_id+1;
}
$draft_no = "D-".$last_inserted_id;

$qry1= "insert into itechxpert (draft_no,title_eng,title_hin,remarks) values('$title_english','$title_hindi','$remarks')";

$result = mysqli_query($conn,$qry1);


?>

File Name : index.php

<div class="col-xs-12" style="border:1px solid #337ab7;">

<center> <h3 id="success"> </h3></center>
<table class="footable blue table table-striped table-bordered table-hover dataTable" data-filter="#filter" data-page-size="3" id="tabSample">
<tr>
<td style="width: 37.5%;">
<label>Title in English</label><font color="red">*</font>:
</td>
<td>

<input class="form-control compcount valid" id="title_english" name="title_english" placeholder="Title in English" type="text" value="" onkeyup="Check_Wordlimit(50, this.id);">

</td>
</tr>
</table>
<table class="footable blue table table-striped table-bordered table-hover dataTable" data-filter="#filter" data-page-size="3" id="tabSample">
<tr>
<td style="width: 37.5%;">
<label>Title in Hindi</label><font color="red">*</font>:
</td>
<td>


<input class="form-control compcount valid" id="title_hindi" name="title_hindi" placeholder="Title in Hindi" type="text" value="" onkeyup="Check_Wordlimit(50, this.id);">
</td>
</tr>
</table>
<table class="footable blue table table-striped table-bordered table-hover dataTable" data-filter="#filter" data-page-size="3" id="tabSample">
<tr>
<td style="width: 37.5%;">
<label>Remarks</label>:
</td>
<td>
<textarea class="form-control" cols="150" id="project_takenup_remarks" name="project_takenup_remarks" rows="3" onkeyup="Check_Wordlimit(300, this.id)"> </textarea>
</td>
</tr>
</table>

<div class="form-group col-md-12 col-sm-12">
<center>
<button class="btn btn-primary pro_takenup_submit" formnovalidate="" id="pro_takenup_next" type="button"><i class="fa fa-plus-square pad-right half fa-1x"></i>Submit </button>
</center>
</div>

</div>
<script>
$(document).on('click', '#btnsave', function(){

$("#btnsave").attr("disabled", "disabled");

var title_english = $('#title_english').val();
var title_hindi = $('#title_hindi').val();
var remarks = $('#project_takenup_remarks').val();

if ($('#title_english').val() == "" || $('#title_english').val() == null)
{
$("#title_english").focus();
alert("Please Enter English Title ");
return false;
}

if ($('#title_hindi').val() == "" || $('#title_hindi').val() == null)
{
$("#title_hindi").focus();
alert("Please Enter Hindi Title ");
return false;
}

if(title_english!="" && title_hindi!=""){
$.ajax({
type: "POST",
url: "ajax/save.php",
data: {title_english: title_english, title_hindi: title_hindi,remarks:remarks},
success: function(data) {
$("#btnsave").removeAttr("disabled");
$('#title_english').val('');
$('#title_hindi').val('');
$('#project_takenup_remarks').val('');

//$('#userForm').find('input').val('')
//$('#success').html('Data Submitted successfully !');
swal("Done!", "Data Submitted successfully!", "success");
//location.reload();
},
error: function(data) {
swal("Error!", "Please try again", "error");
}
});
}
else{
alert('Please fill Title field !');
}


});
</script>

File Name :

<script> function Check_Wordlimit(max_word, field_id){
$("#"+field_id).bind("keypress", function (event) {
if (event.charCode!=0) {
//var regex=/^[a-zA-Z0-9-.,:\/ '()]+$/;
//var regex = new RegExp("^[a-zA-Z.- ]+$");
var regex = /^[a-zA-Z0-9 !@#\$%\^\&*\)\(+=.:\/,_-]+$/g;
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
else {
$('#'+field_id+'_msg').html('maximum word limit is '+max_word+' words');
//$('#'+field_id+'_msg').html(max_word + ' words remaining');
var osp_length = $('#'+field_id).val().split(' ').length;
var osp_remaining = max_word - osp_length;
//$('#'+field_id+'_msg').html(osp_remaining + ' words remaining');
if(osp_length >= max_word){
alert("You have reached the maximum limits of words.");
var osp_data = $('#'+field_id).val().split(' ');
var osp_data_trim = osp_data.splice(0, (max_word-1));
var osp_datas = osp_data_trim.join(" ");

$('#'+field_id).val(osp_datas);
$('#'+field_id+'_msg').html('0 words remaining');
$('#'+field_id).focus();
return false;
}
}
}
});

}
function Check_Charlimit(max_chars, field_id){
$("#"+field_id).bind("keypress", function (event) {
if (event.charCode!=0) {
//var regex=/^[a-zA-Z0-9-.,:\/ '()]+$/;
//var regex = new RegExp("^[a-zA-Z.- ]+$");
var regex = /^[a-zA-Z0-9 !@#\$%\^\&*\)\(+=.:\/,_-]+$/g;
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
else {
$('#'+field_id+'_msg').html('maximum characters limit is '+max_chars+' characters');
//$('#'+field_id+'_msg').html(max_chars + ' characters remaining');
var osp_length = $('#'+field_id).val().length;
var osp_remaining = max_chars - osp_length;
//$('#'+field_id+'_msg').html(osp_remaining + ' characters remaining');

if(osp_length >= max_chars){
alert("You have reached the maximum limits of characters.");
var osp_data = $('#'+field_id).val().split(' ');
var osp_data_trim = osp_data.splice(0, (max_chars-1));
var osp_datas = osp_data_trim.join(" ");

$('#'+field_id).val(osp_datas);
$('#'+field_id+'_msg').html('0 characters remaining');
$('#'+field_id).focus();
return false;
}
}

}
});

} </script>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link