Ajax with PHP & MYSQL Database :
PHP Ajax :
What is AJAX ?.....
AJAX stands for Asynchronous JavaScript and XML.
AJAX is a new technique for creating better, faster, and...
more interactive web applications with the help of XML, HTML, CSS and Java Script.
Conventional web application trasmit information to and from the sever using synchronous requests.
This means you fill out a form,
hit submit,and get directed to a new page with new information from the server.
With AJAX when submit is pressed, JavaScript will make a request to the server,
interpret the results and update the current screen. In the purest sense,
the user would never know that anything was even transmitted to the server.
FIRST CREATE TABLE details :
create table details
(id int,
name varchar(200),
city varchar(200));
(1)FIRST WRITE javascript CODE in <head> section </head> :
<html>
<head>
<script type="text/javascript">
function doDelete(id){
if(confirm("Do you want to delete the record?")){
$.ajax({
url:'delete.php',
type:'post',
data:'id='+id,
success:function(msg){
alert(msg);
window.location.href='pagination2.php';
}
});
}
}
</script>
</head>
<!---Second use following line where you want to call doDelete() method in <body> section </body>--->
<body>
<?php
include("connect.php");
$per_page = 8;
$pages_query = mysql_query("SELECT COUNT('id') FROM notes order by coursename,semester ASC");
$pages = ceil(mysql_result($pages_query, 0) / $per_page);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$start = ($page - 1) * $per_page;
$query = mysql_query("SELECT * FROM notes LIMIT $start, $per_page");
while($row = mysql_fetch_assoc($query))
{
echo "record one";
?>
<a class="click-more" href="#" onClick="doDelete('<?php echo $row['id']; ?>');">read more</a>
<?php
$prev = $page - 1;
$next = $page + 1;
if(!($page<=1)){
echo "<a href='pagination1.php?page=$prev'><button>Prev</button></a> ";
}
if($pages>=1 && $page<=$pages){
for($x=1;$x<=$pages;$x++){
echo ($x == $page) ? '<strong><a href="?page='.$x.'"><button>'.$x.'</button></a></strong> ' : '<a href="?page='.$x.'"><button>'.$x.'</button></a> ';
}
}
if(!($page>=$pages)){
echo "<a href='pagination1.php?page=$next'><button>Next>></button></a>";
}
?>
</body>
</html>
(2)write code for "delete.php" file:
<?php
$id=$_POST['id'];
include("connect.php");
$sql="delete from notes where id='$id'";
mysql_query($sql) or die(mysql_error());
echo "Record deleted successfully";
echo '<br></br>';
echo '<a href="pagination1.php"><button>back to previous page</button></a>';
?>
========================================================================Ajax with Jquery & php & mysql
========================================================================
name varchar(200),
city varchar(200));
Ajax example code for inserting record from form to MYSQL Database :
(1)first write code for insert.html file:
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "insert.php";
var id = document.getElementById("id").value;
var nm = document.getElementById("name").value;
var cy = document.getElementById("city").value;
var vars = "id="+id+"&name="+nm+"&city="+cy;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="id" name="id">
<input type="text" id="name" name="name">
<input type="text" id="city" name="city">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2)Then write code for insert.php :
<?php
$id=$_POST['id'];
$nm=$_POST['name'];
$cy=$_POST['city'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="insert into details (id,name,city) values('$id','$nm','$cy')";
mysql_query($sql);
echo "record inserted successfully";
?>
Ajax example code to update record from form to MYSQL Database :
(1) write code for update.html :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "update.php";
var id = document.getElementById("id").value;
var nm = document.getElementById("name").value;
var cy = document.getElementById("city").value;
var vars = "id="+id+"&name="+nm+"&city="+cy;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="id" name="id">
<input type="text" id="name" name="name">
<input type="text" id="city" name="city">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2)write code for update.php :
<?php
$id=$_POST['id'];
$nm=$_POST['name'];
$cy=$_POST['city'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="update details set name ='$nm', city='$cy' where id='$id'";
mysql_query($sql);
echo "record updated successfully";
?>
Ajax example code to search record from MYSQL Database :
(1)write code search.html :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "search.php";
var nm = document.getElementById("name").value;
var vars = "name="+nm;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="name" name="name">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2)write code for search.php:
<?php
$nm=$_POST['name'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="select * from details where name='$nm'";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo $row['id'];
echo $row['name'];
echo $row['city'];
}
?>
Ajax example code to Delete record from MYSQL Database :
(1)write code for delete.html :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "delete.php";
var id = document.getElementById("id").value;
var vars = "id="+id;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="id" name="id">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2) write code for delete.php :
<?php
$id=$_POST['id'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="delete from details where id='$id'";
mysql_query($sql);
echo "record deleted successfully";
?>
==============================================================
Ajax code using GET method :
==============================================================
(1)write code for ajax.html file:
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var name = document.getElementById('name').value;
var queryString = "?age=" + age ;
queryString += "&wpm=" + wpm + "&name=" + name;
ajaxRequest.open("GET", "test.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = 'myForm'>
Age: <input type = 'text' id = 'age' /> <br />
WPM: <input type = 'text' id = 'wpm' />
NAME <input type='text' id='name' />
<br />
<input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>
(2)write code for test.php file :
<?php
echo $age=$_GET['age'];
echo $wpm=$_GET['wpm'];
echo $name=$_GET['name'];
?>
=======================================================================
(1)FIRST WRITE javascript CODE in <head> section </head> :
<html>
<head>
<script type="text/javascript">
function doDelete(id){
if(confirm("Do you want to delete the record?")){
$.ajax({
url:'delete.php',
type:'post',
data:'id='+id,
success:function(msg){
alert(msg);
window.location.href='pagination2.php';
}
});
}
}
</script>
</head>
<!---Second use following line where you want to call doDelete() method in <body> section </body>--->
<body>
<?php
include("connect.php");
$per_page = 8;
$pages_query = mysql_query("SELECT COUNT('id') FROM notes order by coursename,semester ASC");
$pages = ceil(mysql_result($pages_query, 0) / $per_page);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$start = ($page - 1) * $per_page;
$query = mysql_query("SELECT * FROM notes LIMIT $start, $per_page");
while($row = mysql_fetch_assoc($query))
{
echo "record one";
?>
<a class="click-more" href="#" onClick="doDelete('<?php echo $row['id']; ?>');">read more</a>
<?php
$prev = $page - 1;
$next = $page + 1;
if(!($page<=1)){
echo "<a href='pagination1.php?page=$prev'><button>Prev</button></a> ";
}
if($pages>=1 && $page<=$pages){
for($x=1;$x<=$pages;$x++){
echo ($x == $page) ? '<strong><a href="?page='.$x.'"><button>'.$x.'</button></a></strong> ' : '<a href="?page='.$x.'"><button>'.$x.'</button></a> ';
}
}
if(!($page>=$pages)){
echo "<a href='pagination1.php?page=$next'><button>Next>></button></a>";
}
?>
</body>
</html>
(2)write code for "delete.php" file:
<?php
$id=$_POST['id'];
include("connect.php");
$sql="delete from notes where id='$id'";
mysql_query($sql) or die(mysql_error());
echo "Record deleted successfully";
echo '<br></br>';
echo '<a href="pagination1.php"><button>back to previous page</button></a>';
?>
First of all Write code for filterdownload.php :
<script>
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "displaynotes1previous.php";
var fn = document.getElementById("coursename").value;
var en = document.getElementById("semseter").value;
var vars = "coursename="+fn+"&semseter="+en;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
function ajax_disp(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "displaynotes1.php";
var fn = document.getElementById("coursename").value;
var en = document.getElementById("semseter").value;
var pn = document.getElementById("subject").value;
var vars = "coursename="+fn+"&semseter="+en+"&subject="+pn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
<span style="color:#000;">Select Course Name : -</span>
<select name=coursename id="coursename" >
<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("itexam", $con);
$sql="select * from subject group by coursename ";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['coursename'].'">';
echo $row['coursename'];
echo '<option>';
}
?>
</select>
<span style="color:#000;"> Select Semester : -</span>
<select name=semseter id="semseter" onChange="ajax_post();">
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("itexam",$con);
$sql="select * from subject group by semseter ";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['semseter'].'">';
echo $row['semseter'];
echo '<option>';
}
?>
</select>
<!------>
<br /><br />
<div id="status">
</div>
<br /><br />
<input align="middle" name="myBtn" type="submit" value="Submit Data" onclick="ajax_disp();">
<br />
<?php
ob_flush();
?>
<br /><br />
</div>
</center>
(2)now write code for displaynotes1previous.php:
<html>
<head>
</head>
<body>
<?php
$coursename=$_POST['coursename'];
//echo $coursename;
$semseter=$_POST['semseter'];
//echo $semseter;
?>
Subject <select name="subject" id="subject">
<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("itexam", $con);
$sql="select subject from subject where coursename='$coursename' AND semseter='$semseter'";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['subject'].'">';
echo $row['subject'];
echo '<option>';
}
?>
</select>
</td></tr>
<tr>
<td>
</tr>
</body>
</html>
(3)now write code for displaynotes1.php:
<?php
ob_start();
?>
<?php
$coursename=$_POST['coursename'];
//echo $coursename;
$semseter=$_POST['semseter'];
//echo $semseter;
?>
Subject <select name="subject" id="subject">
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("itexam",$con);
$sql="select subject from subject where coursename='$coursename' AND semseter='$semseter'";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['subject'].'">';
echo $row['subject'];
echo '<option>';
}
?>
</select>
<?php
$coursename=$_POST['coursename'];
$semester=$_POST['semseter'];
$subject=$_POST['subject'];
echo '<h3>';
echo '<table border=0>';
echo '<tr> <td>';
echo "CourseName =".$coursename;
echo '</td> <td> </td>';
echo '<td>';
echo "Semester =".$semester;
echo '</td></tr>';
echo '</table>';
echo '</h3>';
//$con=mysql_connect("localhost","root","");
$con=mysql_connect("localhost","root","");
mysql_select_db("itexam",$con);
//mysql_select_db("itexam",$con);
$sql="select * from notes where coursename='$coursename' AND semester='$semester' AND subject='$subject' order by subject";
$result=mysql_query($sql) or die(mysql_error());
echo '<h4>';
echo '<table border=0>';
echo '<tr><td><h2>Subject Name </h2></td><td> </td><td><h2>Unit </h2></td><td> </td> <td> <h2>Download Link</h2></td></tr>';
while($row=mysql_fetch_array($result))
{
echo ' <tr><td>"'.$row['subject'].'" </td><td> </td><td>"'.$row['unit'].'" </td><td> </td>
<td>
<button ><a href=../proudct_images/'.$row['file'].'>
Download file</a></button> </td></tr>';
}
echo '</table>';
?>
<?php
ob_flush();
?>
================================================================================================================================================
ONCHANGE DROPDWON EXAMPLE USING JQUERY AND AJAX WITH PHP & MYSQL:
================================================================================================================================================
ONCHANGE DROPDWON EXAMPLE USING JQUERY AND AJAX WITH PHP & MYSQL:
STEP 1: create table categorie :
create table categorie
(
category_id int primary key auto_increment ,
type varchar(200),
categoryname varchar(200)
);
STEP 2 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sections Demo</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var data=$(this).val();
var dataString = 'data='+ data;
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
</style>
</head>
<body>
<form action=test.php method=post enctype="multipart/form-data">
<div style="margin:80px">
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
echo $sql1="select * from categorie group by type";
$result1=mysql_query($sql1) or die(mysql_error());
while($row1=mysql_fetch_array($result1))
{
echo '<option value="'.$row1['type'].'">';
echo $row1['type'];
echo '</option>';
}
?>
</select>
<textarea type=text name=hello > </textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'hello' );
</script>
<input type=file name=image>
<input type=submit name=submit value=submit>
</form> <br/><br/>
<label>City :</label>
<div name="city" class="city">
</div>
</div>
</body>
</html>
OUTPUT:
STEP 3: now write code for ajax_city.php file which will execute on onchange of dropdown:
<select name="categoryname" id="categoryname">';
<?php
include("db.php");
$type=$_POST['data'];
echo $sql2="select * from categorie where type='$type'";
$result2=mysql_query($sql2) or die(mysql_error());
while($row2=mysql_fetch_array($result2))
{
echo '<option value="'.$row2['categoryname'].'">';
echo $row2['categoryname'];
echo '</option>';
}
?>
</select>
Step 4: now write code for test.php file which will execute on click on submit button:
<?php
echo "country =". $test=$_POST['country'];
echo '<br>';
echo "categoryname=". $categoryname=$_POST['categoryname'];
echo '<br>';
echo "hello=".$hello=$_POST['hello'];
echo '<br>';
echo "image =". $image=$_FILES['image']['name'];
echo '<br>';
move_uploaded_file($_FILES['image']['tmp_name'],"upload/".$_FILES['image']['name']);
?>
================================================================================================================================================
========================================================================
HTML File – refreshform.html
· Consists of form with id = “form”.
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Without Refreshing Page</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="js/refreshform.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Email:</label>
<input id="email" placeholder="Your Email" type="text">
<label>Contact No.</label>
<input id="contact" placeholder="Your Mobile No." type="text">
<label>Gender:</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Submit">
</form>
</div>
</body>
</html>
jQuery File – refreshform.js
· Sends request to php script with form details. Return notification on successful data submission.
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var gender = $("input[type=radio]:checked").val();
var msg = $("#msg").val();
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("refreshform.php", {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
My-SQL Code
· My-SQL command for creation of database ‘mydba’ and table ‘form_elements’.
CREATE DATABASE mydba;
CREATE TABLE form_element (
id int(25) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
contact int(25) NOT NULL,
gender varchar(255) NOT NULL,
message varchar(255) NOT NULL,
PRIMARY KEY (id)
)
PHP File – refreshform.php
· Insert form information into database.
<?php
// Establishing connection with server by passing "server_name", "user_id", "password".
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable.
$db = mysql_select_db("mydba", $connection);
$name2=$_POST['name1']; // Fetching Values from URL
$email2=$_POST['email1'];
$contact2=$_POST['contact1'];
$gender2=$_POST['gender1'];
$msg2=$_POST['msg1'];
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query
if($query){
echo "Data Submitted succesfully";
}
mysql_close($connection); // Connection Closed.
?>
Css File – refreshform.css
· Includes basic styling of form.
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form{
background-color:#556b2f;
color:#D5FFFA;
border-radius:5px;
border:3px solid #d3cd3d;
padding:4px 30px;
font-weight:700;
width:350px;
font-size:12px;
float:left;
height:auto;
margin-left:35px
}
label{
font-size:15px
}
h3{
text-align:center;
font-size:21px
}
div#mainform{
width:960px;
margin:50px auto;
font-family:'Fauna One',serif
}
input[type=text]{
width:100%;
height:40px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px
}
textarea{
width:100%;
height:60px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px;
resize:none
}
input[type=radio]{
margin:10px 5px 5px
}
input[type=button]{
width:100%;
height:40px;
margin:35px 0 30px;
background-color:#f4a460;
border:1px solid #fff;
border-radius:3px;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px
}
=====================================================================
same example in different way:
=====================================================================
same example in different way:
=====================================================================
HTML File: ajaxsubmit.html
Here, we create our form
<!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="style.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>
PHP File: ajaxsubmit.php
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("mydba", $connection); // Selecting Database
//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
?>
jQuery File: script.js
jQuery file consist of ajax functionality.
$(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;
});
});
MY-SQL Code Segment:
Here is the My-SQL code for creating database and table.
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)
)
CSS File: 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
}
ouput:
No comments:
Post a Comment