Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Generating Day Drop down menu based on month chosen

    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:

    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 Code:
    <?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 Code:
    <?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) ==&& (($year 100) !=|| ($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?
    Last edited by HDRebel88; 05-27-2012 at 09:06 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    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/aspexam...ate/edate1.asp

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it seems a little bit annoying your idea of removing the titles, but if I understand, here's how you could do it:

    Code:
    <!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>

  • #4
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    I'm just trying to use an AJAX call, and I can't get it to work. As of right now it does nothing.

    Code:
    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;
        }
    }
    PHP Code:
    <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 Code:
    <?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>"
    ;
    ?>

  • #5
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Solved.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •