Here i will show you simple loading animation using jQuery. You can make it better for your application.....
This is the index.php file, which send the data for checking to another file.....
<!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=utf-8" />
<title>Serialized Data</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var x=$("#loading");
x.hide();
$("#latter form").submit(function(){
//var x=$(this).serialize();
//alert(x);
x.ajaxStart(function() {
$(this).show();
$("#ff").hide('slow');
});
x.ajaxStop(function() {
$(this).hide();
$("#ff").show('slow');
});
$.post('result.php',$(this).serialize(), function(result){
$("#rslt").html(result);
});
return false;
});
});
</head>
<body>
<div id="loading">Loading...</div>
<div id="latter">
<form id="ff">
Name : <input type="text" id="txtName" name="txtName" />
Email :<input type="email" id="email" name="email" />
<input type="submit" value="Submit" name="submit" id="submit" />
</form>
</div>
<div id="rslt">
</div>
</body>
</html>
txtName=value&email=value
so you dont have to access all the form element to send it...
Here is the response file, where data will be checked...I just display the data....You can check against database.....
<?php
if(isset($_REQUEST['txtName']) && isset($_REQUEST['email']))
{
$name=$_REQUEST['txtName'];
$email=$_REQUEST['email'];
echo $name;
echo "<br/>";
echo $email;
}
else
{
echo "Enter Your Name";
}
?>
Remember this is the very basic example for your Loading animation....You can make batter with this concept for your application....
This is the index.php file, which send the data for checking to another file.....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Serialized Data</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var x=$("#loading");
x.hide();
$("#latter form").submit(function(){
//var x=$(this).serialize();
//alert(x);
x.ajaxStart(function() {
$(this).show();
$("#ff").hide('slow');
});
x.ajaxStop(function() {
$(this).hide();
$("#ff").show('slow');
});
$.post('result.php',$(this).serialize(), function(result){
$("#rslt").html(result);
});
return false;
});
});
</head>
<body>
<div id="loading">Loading...</div>
<div id="latter">
<form id="ff">
Name : <input type="text" id="txtName" name="txtName" />
Email :<input type="email" id="email" name="email" />
<input type="submit" value="Submit" name="submit" id="submit" />
</form>
</div>
<div id="rslt">
</div>
</body>
</html>
- jQuery's serialize() method make very easy to submit form data without any concern. It's send data using query string formal like -
txtName=value&email=value
so you dont have to access all the form element to send it...
- In the "Loading...." section you can use any .gif image for batter animation.
Here is the response file, where data will be checked...I just display the data....You can check against database.....
<?php
if(isset($_REQUEST['txtName']) && isset($_REQUEST['email']))
{
$name=$_REQUEST['txtName'];
$email=$_REQUEST['email'];
echo $name;
echo "<br/>";
echo $email;
}
else
{
echo "Enter Your Name";
}
?>
Remember this is the very basic example for your Loading animation....You can make batter with this concept for your application....
No comments:
Post a Comment