Storing the value from dropdown box in session using ajax programming with lightbox means user will have only focus to dropdown box. Lightbox will be overlayed on website, so the dropdown box can easily get selected by user. Here is the tutorial, source code and demo link
index.php
<?php
session_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>
ajax.php
Data passed to ajax.php will be stored in a SESSION
<?php
session_start();
if(!empty($_POST['area']))
{
$_SESSION['area']=$_POST['area'];
echo $_SESSION['area'];
}
?>
index.php
<?php
session_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>
ajax.php
Data passed to ajax.php will be stored in a SESSION
<?php
session_start();
if(!empty($_POST['area']))
{
$_SESSION['area']=$_POST['area'];
echo $_SESSION['area'];
}
?>
Posts
![IVRAMANA](https://draft.blogger.com/img/profile_blank_gray.jpg" title="IVRAMANA)
0 comments:
Post a Comment