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 table using ajax with php?

Insert Values into Database Using Ajax

Table:-

CREATE TABLE `freeze`.`user` (
`id` INT( 3 ) NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 30 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = INNODB;

When submit button is clicked, ajax function will be called with method as POST, url as ajax.php and sucess message.


Download insert data zip files

File Name:- index.php

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//$("#submit").submit(function() {
$("#submit").click(function() {
var name = $('#name').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "name="+ name,
success: function(){
alert("sucess");
}
});

});
});
</script>
</head>

<body>
<form action="" method="post">
Name:<input type="text" name="name" id="name" /><br />
<input type="submit" name="submit" id="submit" />
</form>
</body>
</html>


File Name:- ajax.php

<html>

<body>

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("ajax",$query);
$name=$_POST['name'];

mysql_query("insert into users (name) values('$name')");
?>
</body>
</html>


/****************** OR ********************/


<?php

$host = "localhost";
$username ="root";
$password = "";
$db_name = "vibrea";

$con = mysqli_connect($host,$username,$password)or die(mysqli_error());
mysqli_select_db($con,$db_name)or die(mysqli_error($con));
$qry = "insert into users (name) values('$name')";
$result = mysqli_query($con,$qry);

?>

Ajax Insert

File name : index.php

<?php include 'header.php';?>


<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//$("#submit").submit(function() {
$("#submit").click(function() {
var title = $('#apptitle').val();
var appname = $('#appname').val();
var appurl = $('#appurl').val();
var appdate = $('#appdate').val();
var approveby = $('#approveby').val();
var createdby = $('#createdby').val();
var status = $('#optionsRadios1').val();


$.ajax({
type: "POST",
url: "ajax-insert-app.php",
data: "apptitle="+title+"&appname="+appname+"&appurl="+appurl+"&appdate="+appdate+"&createdby="+createdby+"&approveby="+approveby+"&status="+status,

//success: function(data) {
// alert("Thank you for updating!");
//}

success:function(data){
$("#msg-status").html(data);
}


});

return false;

});
});
</script>


<!-- start: Content -->
<div id="content" class="span10">


<ul class="breadcrumb">
<li>
<i class="icon-home"></i>
<a href="index.php">Home</a>
<i class="icon-angle-right"></i>
</li>
<li>
<i class="icon-edit"></i>
<a href="#">Apps Element</a>
</li>
</ul>

<div class="row-fluid sortable">
<div class="box span12">



<div class="box-header" data-original-title>
<h2><i class="halflings-icon white edit"></i><span class="break"></span>Apps Elements</h2>



</div>

<center><div id="msg-status" style="color:red; font-size: 20px;"></div></center>
<br/>
<div class="box-content">
<form class="form-horizontal" method="post" action="ajax-insert-app.php">
<fieldset>
<div class="control-group">
<label class="control-label" for="typeahead">App Title </label>
<div class="controls">
<input type="text" class="span6 typeahead" name="apptitle" id="apptitle">

</div>
</div>


<div class="control-group">
<label class="control-label" for="focusedInput">App Name </label>
<div class="controls">
<input class="input-xlarge focused" type="text" name="appname" id="appname">
</div>
</div>

<!-- <div class="control-group">
<label class="control-label" for="focusedInput">App URL</label>
<div class="controls">
<input class="input-xlarge focused" type="text" name="appurl" id="appurl">
</div>
</div> -->


<div class="control-group">
<label class="control-label" for="selectError">Select Domain </label>
<div class="controls">
<select id="appurl" name="appurl">
<option>--- select Domain ---</option>
<option>http://billicat.me</option>
<option>http://appscub.com</option>
<option>http://rategov.in</option>
<option>http://appscubo.com</option>
<option>http://appsmora.com</option>
<option>http://appslimo.com</option>
<option>http://majnukateela.com</option>
<option>http://jugnuapps.com</option>
</select>
</div>
</div>


<div class="control-group">
<label class="control-label" for="date01">App created Date</label>
<div class="controls">
<input type="text" class="input-xlarge datepicker" name="appdate" id="appdate">
</div>
</div>


<div class="control-group">
<label class="control-label" for="focusedInput">Created By </label>
<div class="controls">
<input class="input-xlarge focused" type="text" name="createdby" id="createdby">
</div>
</div>

<div class="control-group">
<label class="control-label" for="focusedInput">Approved By </label>
<div class="controls">
<input class="input-xlarge focused" type="text" name="approveby" id="approveby">
</div>
</div>

<div class="control-group">
<label class="control-label">Status</label>
<div class="controls">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="Active" >
Active
</label>
<div style="clear:both"></div>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="Inactive">
Inactive
</label>
</div>
</div>







<div class="form-actions">
<button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
<button type="reset" class="btn">Reset</button>
</div>
</fieldset>
</form>

</div>
</div><!--/span-->

</div><!--/row-->




</div><!--/.fluid-container-->

<!-- end: Content -->
</div><!--/#content.span10-->
</div><!--/fluid-row-->



<div class="clearfix"></div>

<?php include 'footer.php';?>

File name : ajax-insert-app.php

<?php

include 'db.php';
if(isset($_POST['apptitle']) && isset($_POST['appname']) && isset($_POST['appurl']) && isset($_POST['appdate']) && isset($_POST['approveby']) && isset($_POST['status']))
{
$title=$_POST['apptitle'];
$name=$_POST['appname'];
$url=$_POST['appurl'];
$date=$_POST['appdate'];
$approveby=$_POST['approveby'];
$createdby=$_POST['createdby'];
$status=$_POST['status'];


$qry = "insert into apps_details (app_title, app_name, app_url, app_date, created_by, approved_by, status) values('$title','$name','$url','$date','$createdby','$approveby','$status')";
$result=mysqli_query($conn,$qry);
if($result)
{
print "your data inserted succesfully";
}



}
?>


Output :-



How to Submit Form data Using jQuery,Ajax, in PHP

File name : index.php

<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here -->
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">
</div>
</div>
</div>
</body>
</html>

script.js

File name : script.js

$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});

ajaxsubmit.php

File name : ajaxsubmit.php

<?php
include 'db.php';
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];
//Insert query
$query = mysql_query("insert into form_element(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted Succesfully";
mysql_close($connection); // Connection Closed
?>

database :-

CREATE DATABASE mydba;
CREATE TABLE form_element(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
contact varchar(255) NOT NULL,
PRIMARY KEY (id)
)

style.css

File name : style.css

@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form {
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px #123456;
font-weight:400;
width:350px;
margin:50px 250px 0 35px;
float:left;
height:500px
}
#form div {
padding:10px 0 0 30px
}
h3 {
margin-top:0;
color:#fff;
background-color:#3C599B;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
#mainform {
width:960px;
margin:50px auto;
padding-top:20px;
font-family:'Fauna One',serif
}
input {
width:90%;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #123456
}
input[type=button] {
background-color:#3C599B;
border:1px solid #fff;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff
}





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