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
Ajax Dropdown Session
ajax Dropdown Session exaple.
File Name:- index.php
<?phpsession_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var height=$(window).height();
var width=$(window).width();
$(".black-overlay").css("display","block");
$(".form-area").css("display","block");
$(".black-overlay").css("height",height);
$(".form-area").css("margin-top",height/2);
$(".form-area").css("margin-left",width/2.6);
$('#city').change(function(){
$(".black-overlay").css("display","none");
$(".form-area").css("display","none");
var area=$('#city option:selected').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "area="+area ,
success: function(html){
$('#area').val(html);
}
});
});
});
</script>
<style type="text/css">
.black-overlay
{
background:#000;
opacity: 0.6;
position:fixed;
top: 0;
left: 0;
width: 100%;
z-index: 110000;
display:none;
}
.form-area
{
width: 300px;
margin:0 auto;
position: fixed;
z-index: 10000000;
display:none;
}
#city
{
padding: 7px 13px;
width: 226px;
height: 43px;
border: 1px solid #fff;
line-height: 50px;
font-size: 21px;
color: #000;
}
.select-city-text
{
color: #fff;
text-transform: uppercase;
font-family: verdana;
font-size: 20px;
margin: 0 0 8px 0;
letter-spacing: 9px;
}
</style>
</head>
<body>
<div class="black-overlay">
</div>
<form method="post" action="" class="form-area">
<div class="select-city-text">Select City</div>
<select id="city">
<option>Bangalore</option><option>Mysore</option><option>Bagalkot</option><option>Bangalore</option><option>Basavakalyan</option><option>Belgaum</option><option>Bellary</option><option>Bhadravati</option><option>Bidar</option><option>Bijapur</option><option>Bommanahalli</option>
</select>
</form>
<input type="text" id="area" />
</body>
</html>
File Name:- ajax.php
<?phpsession_start();
if(!empty($_POST['area']))
{
$_SESSION['area']=$_POST['area'];
echo $_SESSION['area'];
}
?>