Showing posts with label PHP Dropdown. Show all posts
Showing posts with label PHP Dropdown. Show all posts

Monday, 20 July 2015

PHP: Store value from Dropdown in SESSION Using Ajax with Lightbox

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'];
}

?>

Tuesday, 2 June 2015

PHP: Dropdown menu from an array

<?php 
//Array contents array 1 :: value 
$myArray1 = array('Cat','Mat','Fat','Hat'); 
//Array contents array 2 :: key => value 
$myArray2 = array('c'=>'Cat','m'=>'Mat','f'=>'Fat','h'=>'Hat'); //Values from array 1 

 echo'<select name="Words">'; 
//for each value of the array assign a variable name word 
foreach($myArray1 as $word){ 
    echo'<option value="'.$word.'">'.$word.'</option>'; 
} 
echo'</select>'; //Values from array 2 
echo'<select name="Words">'; 
//for each key of the array assign a variable name let 
//for each value of the array assign a variable name word 
foreach($myArray2 as $let=>$word){ 
    echo'<option value="'.$let.'">'.$word.'</option>'; 
} 
echo'</select>'; ?>

Subscribe to: Posts (Atom)