Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
How to insert data in database using 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>
<style type="text/css">
#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
}
</style>
<script type="text/javascript">
$(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: "insert_ajax.php",
data: dataString,
cache: false,
/* success: function(result){
alert("sucess");
} */
success:function(data) {
$('#msg').html(data);
}
});
}
return false;
});
});
</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 id="msg"></div>
<form action="" method="post" id="myform">
<div>
<label>Name :</label>
<input id="name" name="name1" type="text">
<label>Email :</label>
<input id="email" name="email1" type="text">
<label>Password :</label>
<input id="password" name="password1" type="password">
<label>Contact No :</label>
<input id="contact" type="text" name="contact1">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
</div>
</div>
</body>
</html>
File name : insert_ajax.php
<?php
include 'db.php';
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];
//Insert query
$query = mysqli_query($conn,"insert into contactus(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted Succesfully";
//mysqli_close($conn); // Connection Closed
?>
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>
<style type="text/css">
#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
}
</style>
<script type="text/javascript">
$(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;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "insert_ajax.php",
data: dataString,
success:function(data) {
$('#msg').html(data);
}
});
$("#myform")[0].reset(); // this function clear the input text box.
// $("#addDriver")[0].reset(); should be just fine, provided that is id of your form, as long as you use it within success() or complete() callback function.
return false;
});
});
</script>
<script type="text/javascript">
//$("#myform")[0].reset();
//document.getElementById("myform").reset();
</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 id="msg"></div>
<form action="" method="post" id="myform">
<div>
<label>Name :</label>
<input id="name" name="name1" type="text">
<label>Email :</label>
<input id="email" name="email1" type="text">
<label>Password :</label>
<input id="password" name="password1" type="password">
<label>Contact No :</label>
<input id="contact" type="text" name="contact1">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
</div>
</div>
</body>
</html>
insert_ajax.php
File name : insert_ajax.php
<?php
include 'db.php';
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];
//Insert query
$query = mysqli_query($conn,"insert into contactus(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted Succesfully";
//mysqli_close($conn); // Connection Closed
?>
How to insert data in table in php using ajax.
File name : index.php
<html>
<head>
<title>Composing news</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function reset_form() {
document.getElementById("title").reset();
}
</script>
<script type="text/javascript">
$(document).ready(function(e) { // ready method make funtion available after the document has been loaded
$("#submit").click(function(){
if($("#title").val().length == 0 || $("#category").val().length == 0 || $("#summary").val().length == 0 || $("#content").val().length == 0) {
alert("Please fill into every blank!");
} // end if
else {
$.post("file3_ajax.php",{title: $("#title").val(), category: $("#category").val(), summary: $("#summary").val(),content: $("#content").val()},
function(data){
// post method is used to perform an AJAX HTTP POST request
//alert("succesfully inserted");
//success:function(data) {
$('#msg').html(data);
}); // end $.post
} // end else
$("#composing_form")[0].reset();// insert data and then reset the all fields.
}); // end $("#submit)
}); // end $(document)
</script>
<script>
// when you click on reset button then reset all fields of your form.
$("#reset").on("click", function() {
$("#composing_form").each( function() { this.reset; });
});
</script>
<style>
#submit{
padding: 5 5 5 5;
border-radius: 5px;
text-align:center;
display:inline;
background-image: linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -o-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -moz-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -webkit-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -ms-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(81,151,239)),
color-stop(0.58, rgb(114,182,255)),
color-stop(0.79, rgb(149,219,255))
);
}
#reset{
padding: 5 5 5 5;
border-radius: 5px;
text-align:center;
display:inline;
background-image: linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -o-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -moz-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -ms-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(167,12,21)),
color-stop(0.56, rgb(201,39,49)),
color-stop(0.78, rgb(242,67,79))
);
}
</style>
</head>
<body>
<!--form-->
<p id="status">Composing</p>
<div id="msg"></div>
<form id = "composing_form" name="composing_form" method = "post" action="">
<p>Title: <input class="form" type="text" id="title" name="title" value=""/></p>
<p>Category: <input type="category" class="form" id="category" name="category" value=""/></p>
<p>Summary:<br/><textarea class="form" id="summary" name="summary" cols="40" rows ="3"></textarea></p>
<p>Content:<br/><textarea class="form" id="content" name="content" cols="60" rows ="10"></textarea></p>
<input type="text" id="submit" name="submit" value="Submit">
<input type="submit" id="reset" name="reset" value="Reset">
</form>
<!--End form-->
</body>
</html>
File3_ajax.php page
File name : file3_ajax.php
<?
include 'db.php';
$title = addslashes($_POST['title']);
$category = addslashes($_POST['category']);
$summary = addslashes($_POST['summary']);
$content = addslashes($_POST['content']);
// $query = "INSERT INTO test VALUES ('NULL', '" . $title . "', '".$category."', '".$summary."', '".$content."' );";
$query = mysqli_query($conn,"insert into contactus(name, email, password, contact) values ('$title', '$category', '$summary','$content')");
echo "Form Submitted Succesfully";
?>
database
File name : db.php
<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "ajax_collections";
$conn = mysqli_connect($host,$user,$pass);
mysqli_select_db($conn, $dbname);
?>
File name : index.php
File name : index.php
File name : index.php