Monday, May 20, 2013

Dependent combo box drop-down in PHP MYSQL JQUERY Part II


<?php
include_once('db.php');
?>
<html>
<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript">

function getXMLHTTP()
{ //fuction to return the xml http object
var xmlhttp=false;
try
{
xmlhttp=new XMLHttpRequest();
}
catch(e)
{
try
{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)
{
xmlhttp=false;
}
}
}
return xmlhttp;
}

function getShowPlace(showId)
{
  var strURL="showplace.php?show_name="+showId;
  var req = getXMLHTTP();
  if (req)
{
    req.onreadystatechange = function()
{
    if (req.readyState == 4)
{
      // only if "OK"
      if (req.status == 200)
{    
      document.getElementById('showplacediv').innerHTML=req.responseText;    
      }
else
{
      alert("There was a problem while using XMLHTTP:\n" + req.statusText);
      }
}  
}
    req.open("GET", strURL, true);
    req.send(null);
  }
  }

function getTime(showId)
{
  var strURL="time.php?date="+showId;
  var req = getXMLHTTP();
  if (req)
{
    req.onreadystatechange = function()
{
    if (req.readyState == 4)
{
      // only if "OK"
      if (req.status == 200)
{    
      document.getElementById('timediv').innerHTML=req.responseText;    
      }
else
{
      alert("There was a problem while using XMLHTTP:\n" + req.statusText);
      }
}  
}
    req.open("GET", strURL, true);
    req.send(null);
  }
  }

 

//date picker function

$(document).ready(function()
{
// Enable a range of dates
var enabledDaysRange = [["5-3-2013 to 5-31-2013", "6-1-2013 to 6-15-2013" ], '5-9-2013'];
function enableRangeOfDays(d)
{
for(var i = 0; i < enabledDaysRange.length; i++)
{
if($.isArray(enabledDaysRange[i]))
{
for(var j = 0; j < enabledDaysRange[i].length; j++)
{
var r = enabledDaysRange[i][j].split(" to ");
r[0] = r[0].split("-");
r[1] = r[1].split("-");
if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1]))
{
return [true];
}
}
}
else
{
if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == enabledDaysRange[i])
{
return [true];
}
}
}
return [false];
}
$('#datepicker8').datepicker(
{
dateFormat: 'dd-mm-yy',
minDate:0,
numberOfMonths: 2,
beforeShowDay: enableRangeOfDays

});
});

</script>
</head>
<body>

<div  style="width:300px;height: auto; float: left; ">
<form method="post" action="ticketbooking.php" name="form1">
<div  style="width:300px;height: 15px; float: left; ">&nbsp;</div>
<div  style="width:100px;height: auto; float: left; "> Show Name :</div>
<div align="left" style="width:200px;height: auto; float: left; ">
<select name="show_name" onChange="getShowPlace(this.value)">
<?php
$result = mysql_query("SELECT * FROM show_name");
while($row=mysql_fetch_array($result))
{
echo "<option value=".$row[show_id].">$row[show_name]</option>";
}
?>
</select>
</div>
<div  style="width:300px;height: 10px; float: left; ">&nbsp;</div>
<div  style="width:100px;height: auto; float: left; "> Show Place : </div>
<div align="left" style="width:200px;height: auto; float: left; ">
<div id="showplacediv">
<select name="show_place" >
<option>----</option>
</select>
</div>
</div>
<div  style="width:300px;height: 10px; float: left; ">&nbsp;</div>
<div  style="width:100px;height: auto; float: left; "> Show Date : </div>
<div  style="width:145px;height: auto; float: left; ">
<input type="text" name="date" id="datepicker8" onchange="getTime(this.value)"  />
</div>
<div  style="width:300px;height: 10px; float: left; ">&nbsp;</div>
<div  style="width:100px;height: auto; float: left; "> Show Time : </div>
<div  style="width:200px;height: auto; float: left; ">
<div id="timediv">
<select name="time" >
<option>----</option>
</select>
</div
</div>
<div  style="width:300px;height: 10px; float: left; ">&nbsp;</div>
<div  style="width:100px;height: auto; float: left; "> Catagory : </div>
<div align="left" style="width:200px;height: auto; float: left; ">
<input type="radio" name="catagory" value="Platinum">Platinum Rs.200/-<br>
<input type="radio" name="catagory" value="Gold">Gold Rs.150/-<br>
<input type="radio" name="catagory" value="Silver">Silver Rs.100/-
</div>
<div  style="width:300px;height: 10px; float: left; ">&nbsp;</div>
<div  style="width:100px;height: auto; float: left; "> Select Seats : </div>
<div align="left" style="width:200px;height: auto; float: left; ">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div  style="width:300px;height: 15px; float: left; ">&nbsp;</div>
<div align="center" style="width:300px;height: 30px;  float: left; ">

<input type="submit" value="Submit">
</div>
</form>
</div>


</body>
</html>

No comments: