Generating Day Drop down menu based on month chosen

HDRebel88

05-27-2012, 06:43 AM

I'm hoping this will be a simple javascript script, but I'm looking to have a dropdown menu generated based on what month is chosen in another dropdown menu. I also want the titles "Month", "Day", and "Year" to show up as the defaults on the dropdown menu, but when you click into the menu have them not be in the list. (A "title option" would be a nice addition to dropdown menus.)

How should this be done?

Here's the the relevant HTML code:

<p class="register_form_position_birthday">
Birthday:
<select>
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select>
<option>Day</option>
</select>
<select>
<option>Year</option>
</select>
</p>

I have the following PHP page:

<?php
require_once 'function.php';
$month=$_GET['month'];
$year=$_GET['year'];
$test=generateBirthDayMenu($month,$year);

echo "<select name=\"day\">
<option>Day</option>
$test
</select>";
?>

And the following php function:

<?php
function generateBirthDayMenu($month,$year){
session_start();
$day_array=array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28);
$month_array1=array("April", "June", "September", "November");
$month_array2=array("January", "March", "May", "July", "August", "October", "December");

if($month=="February" && ($year % 4) ==0 && (($year % 100) !=0 || ($year % 400) ==0)){
array_push($day_array, "29");
}

foreach($month_array1 as $month_value){
if($month==$month_value){
array_push($day_array, "29", "30");
}
}

foreach($month_array2 as $month_value){
if($month==$month_value){
array_push($day_array, "29", "30", "31");
}
}

foreach($day_array as $day){
$day_menu.='<option value="'.$day.'"'; if(isset($_SESSION['birthday_day']) && $_SESSION['day']==$day){ $day_menu.=' selected="selected"'; } $day_menu.='>'.$day.'</option>'."\n";
}

return $day_menu;
}
?>

I'm assuming from here I need some way to fire off the function/PHP page and update the select field when the user selects the Month and/or Year. I know how to use AJAX, but I've never tried dropping it into a select/option menu before. How is this done?

sunfighter

05-27-2012, 02:28 PM

It appears that you want a select dropdown to pick birthdays. This has been done in a lot of places on the web..Look here http://www.truegeeks.com/asp/aspexamples/gendate/edate1.asp

xelawho

05-27-2012, 03:04 PM

it seems a little bit annoying your idea of removing the titles, but if I understand, here's how you could do it:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<select id="year">
<option value="">please select a year</option>
</select>
<select id="month">
<option value="">please select a month</option>
</select>
<select id="day">
<option value="">please select a day</option>
</select>
<div id="message"></div>
<script type = "text/javascript">
var monthnames=["January", "February","March", "April","May", "June","July", "August", "September","October", "November","December"]
for (var i = 1; i < 25; i++) {
var theyear=i+1990;
document.getElementById("year").options[i]=new Option(theyear,theyear)
}

for (var a = 1; a < 13; a++) {
document.getElementById("month").options[a]=new Option(monthnames[a-1],a)
}

function DaysInMonth(y,m) {
return new Date(y,m,0).getDate();
}

function removeOpt(sel){
if(sel.options[0].value==""){
sel.remove(0);
}
}

function getDays(){
document.getElementById("message").innerHTML=""
yr=document.getElementById("year").value
mth=document.getElementById("month").value
if (yr==""){
document.getElementById("message").innerHTML="please select a year"
document.getElementById("year").focus()
return;
} else {
var dim=DaysInMonth(yr,mth)
for (var a = 1; a <= dim; a++) {
document.getElementById("day").options[a]=new Option(a,a)
}
}
}

if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, ob[eProp]);
};

var sels=document.getElementsByTagName("select")
for (var a = 0; a <sels.length; a++) {
addEvent(sels[a], 'click', function(){removeOpt(this)});
}
addEvent(document.getElementById('month'), 'change', getDays);
</script>
</body>
</html>

HDRebel88

05-27-2012, 09:02 PM

I'm just trying to use an AJAX call, and I can't get it to work. As of right now it does nothing.

var selectmenu=document.getElementById("month");
var month=document.getElementById("month").value;
selectmenu.onchange=sndReq(,month);
function requestObj() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

var http = requestObj();

function sndReq(year,month) {
http.open('get', 'day_menu.php?year='+year+'&month='+month, true);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById("day").innerHTML = response;
}
}

<p class="register_form_position_birthday">
Birthday:
<select name="month" id="month">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select name="day" id="day">
<option>Day</option>'."\n".
$day_menu
.'</select>
<select name="year" id="year">
<option>Year</option>'."\n".
$year_menu
.'</select>
</p>

<?php
require_once 'function.php';
$month=$_GET['month'];
$year=$_GET['year'];
$form_day_menu=generateBirthDayMenu($month,$year);

echo "<select name=\"day\">
<option>Day</option>
$form_day_menu
</select>";
?>

HDRebel88

05-28-2012, 07:43 AM

Solved.