Auto-populate HTML Drop Down Menus

  • mbenken
  • Newbie
  • Newbie
  • mbenken
  • Posts: 6

Post 3+ Months Ago

Hello,
I have something to ponder for everyone. I have drop-down "A" which is a list of months and drop-down "B" with is a list of 5 years, the years being the current year minus one through plus four. There two more drop-downs "C" and "D": "C" has a list of months and "D" has a list of 5 years. I was wondering if there was a way of choosing a month in drop-down "A" and year in drop-down "B" and have "C" and "D" be auto-populated with a month and year that is 23 months in the future. For Example, I choose Mar for "A" and 2011 for "B". Can "C" and "D" get auto-populated with Feb and 2013 respectively? Can this be done? If so, would I use JavaScript or PHP considering the code I already have?

Here is my code so far:
Code: [ Select ]
[php]<span style="margin-right:3px;">Date Range (max range: 24 months)</span><br />
        <select name="from_mo">
    <option></option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
    </select>
    <select name="from_yr">
    <option></option>
    <?php
    $year = date("Y");
    $i = $year-1;
    while ($i < $year+4) {
        echo '<option>'.$i.'</option>';
        $i++;
    }
    ?>
    </select>
    <span style="margin-left:3px; margin-right:3px;"> to </span>
        <select name="to_mo">
    <option></option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
    </select>
    <select name="to_yr">
    <option></option>
    <?php
    $year = date("Y");
    $i = $year-1;
    while ($i < $year+4) {
        '<option>'.$i.'</option>';
        $i++;
    }
    ?>
    </select>[/php]
  1. [php]<span style="margin-right:3px;">Date Range (max range: 24 months)</span><br />
  2.         <select name="from_mo">
  3.     <option></option>
  4.     <option>Jan</option>
  5.     <option>Feb</option>
  6.     <option>Mar</option>
  7.     <option>Apr</option>
  8.     <option>May</option>
  9.     <option>Jun</option>
  10.     <option>Jul</option>
  11.     <option>Aug</option>
  12.     <option>Sep</option>
  13.     <option>Oct</option>
  14.     <option>Nov</option>
  15.     <option>Dec</option>
  16.     </select>
  17.     <select name="from_yr">
  18.     <option></option>
  19.     <?php
  20.     $year = date("Y");
  21.     $i = $year-1;
  22.     while ($i < $year+4) {
  23.         echo '<option>'.$i.'</option>';
  24.         $i++;
  25.     }
  26.     ?>
  27.     </select>
  28.     <span style="margin-left:3px; margin-right:3px;"> to </span>
  29.         <select name="to_mo">
  30.     <option></option>
  31.     <option>Jan</option>
  32.     <option>Feb</option>
  33.     <option>Mar</option>
  34.     <option>Apr</option>
  35.     <option>May</option>
  36.     <option>Jun</option>
  37.     <option>Jul</option>
  38.     <option>Aug</option>
  39.     <option>Sep</option>
  40.     <option>Oct</option>
  41.     <option>Nov</option>
  42.     <option>Dec</option>
  43.     </select>
  44.     <select name="to_yr">
  45.     <option></option>
  46.     <?php
  47.     $year = date("Y");
  48.     $i = $year-1;
  49.     while ($i < $year+4) {
  50.         '<option>'.$i.'</option>';
  51.         $i++;
  52.     }
  53.     ?>
  54.     </select>[/php]


Thanks,
Michael
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I am curious if you ever found out a solution for this. I would say this can be done, and in my opinion probably easiest using a bit of PHP and Javascript together. If I were doing it I would use PHP to populate everything based on today's date according to your server, and then write some sort of Javascript to automatically change fields depending on what is chosen.
  • mbenken
  • Newbie
  • Newbie
  • mbenken
  • Posts: 6

Post 3+ Months Ago

Actually, I did discover a solution. After the first 'month' and 'year' are set in the first set of drop-downs, the page is re-loaded placing a month and year in second set of drop-downs. There is an onChange event in the first 'year' drop-down. The re-loaded page has the chosen month and year in the URL. I use the $_GET method the obtain the two values, do a series of PHP if/then statements for the second month, and PHP calculations for the second year. Then I put the second month and year values in respective values of the second set of drop-downs.

Code: [ Select ]
<?php 
    if (isset($_GET['m'])) {
            if ($_GET['m'] == "Jan") {
                $monthrangeend = "Dec";    
            }
            if ($_GET['m'] == "Feb") {
                $monthrangeend = "Jan";    
            }
            if ($_GET['m'] == "Mar") {
                $monthrangeend = "Feb";    
            }
            if ($_GET['m'] == "Apr") {
                $monthrangeend = "Mar";    
            }
            if ($_GET['m'] == "May") {
                $monthrangeend = "Apr";    
            }
            if ($_GET['m'] == "Jun") {
                $monthrangeend = "May";    
            }
            if ($_GET['m'] == "Jul") {
                $monthrangeend = "Jun";    
            }
            if ($_GET['m'] == "Aug") {
                $monthrangeend = "Jul";    
            }
            if ($_GET['m'] == "Sep") {
                $monthrangeend = "Aug";    
            }
            if ($_GET['m'] == "Oct") {
                $monthrangeend = "Sep";    
            }
            if ($_GET['m'] == "Nov") {
                $monthrangeend = "Oct";    
            }
            if ($_GET['m'] == "Dec") {
                $monthrangeend = "Nev";    
            }
        } else {
            $monthrangeend = "";
        }
    if (isset($_GET['y'])) {
            $yearplustwo = $_GET['y'] + 2;
    } else {
      $yearplustwo = "";
    }

        ?>
    <form name="your form name" method="get" action="some action here">
    
    <span style="margin-right:3px;">Date Range (max range: 24 months)</span><br />
        <select name="from_mo" id="frommo">
    <option><?php echo $_GET["m"];?></option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
    </select>
    <select name="from_yr" id="fromyr" onchange="window.location.href='/members/index.php?m=' + this.form.frommo.options[this.form.frommo.selectedIndex].value + '&y=' + this.form.fromyr.options[this.form.fromyr.selectedIndex].value">
        <option><?php echo $_GET["y"];?></option>
    <?php
                $year = date("Y");
                $i = $year-1;
                while ($i < $year+4) {
                    echo '<option>'.$i.'</option>';
                    $i++;
                }
                ?>
    </select>
    <span style="margin-left:3px; margin-right:3px;"> to </span>
        <select name="to_mo">
    <option><?php echo $monthrangeend;?></option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
    </select>
    <select name="to_yr">
    <option><?php echo $yearplustwo;?></option>
    <?php
                $year = date("Y");
                $i = $year-1;
                while ($i < $year+4) {
                    echo '<option>'.$i.'</option>';
                    $i++;
                }
                ?>
    </select>
  1. <?php 
  2.     if (isset($_GET['m'])) {
  3.             if ($_GET['m'] == "Jan") {
  4.                 $monthrangeend = "Dec";    
  5.             }
  6.             if ($_GET['m'] == "Feb") {
  7.                 $monthrangeend = "Jan";    
  8.             }
  9.             if ($_GET['m'] == "Mar") {
  10.                 $monthrangeend = "Feb";    
  11.             }
  12.             if ($_GET['m'] == "Apr") {
  13.                 $monthrangeend = "Mar";    
  14.             }
  15.             if ($_GET['m'] == "May") {
  16.                 $monthrangeend = "Apr";    
  17.             }
  18.             if ($_GET['m'] == "Jun") {
  19.                 $monthrangeend = "May";    
  20.             }
  21.             if ($_GET['m'] == "Jul") {
  22.                 $monthrangeend = "Jun";    
  23.             }
  24.             if ($_GET['m'] == "Aug") {
  25.                 $monthrangeend = "Jul";    
  26.             }
  27.             if ($_GET['m'] == "Sep") {
  28.                 $monthrangeend = "Aug";    
  29.             }
  30.             if ($_GET['m'] == "Oct") {
  31.                 $monthrangeend = "Sep";    
  32.             }
  33.             if ($_GET['m'] == "Nov") {
  34.                 $monthrangeend = "Oct";    
  35.             }
  36.             if ($_GET['m'] == "Dec") {
  37.                 $monthrangeend = "Nev";    
  38.             }
  39.         } else {
  40.             $monthrangeend = "";
  41.         }
  42.     if (isset($_GET['y'])) {
  43.             $yearplustwo = $_GET['y'] + 2;
  44.     } else {
  45.       $yearplustwo = "";
  46.     }
  47.         ?>
  48.     <form name="your form name" method="get" action="some action here">
  49.     
  50.     <span style="margin-right:3px;">Date Range (max range: 24 months)</span><br />
  51.         <select name="from_mo" id="frommo">
  52.     <option><?php echo $_GET["m"];?></option>
  53.     <option>Jan</option>
  54.     <option>Feb</option>
  55.     <option>Mar</option>
  56.     <option>Apr</option>
  57.     <option>May</option>
  58.     <option>Jun</option>
  59.     <option>Jul</option>
  60.     <option>Aug</option>
  61.     <option>Sep</option>
  62.     <option>Oct</option>
  63.     <option>Nov</option>
  64.     <option>Dec</option>
  65.     </select>
  66.     <select name="from_yr" id="fromyr" onchange="window.location.href='/members/index.php?m=' + this.form.frommo.options[this.form.frommo.selectedIndex].value + '&y=' + this.form.fromyr.options[this.form.fromyr.selectedIndex].value">
  67.         <option><?php echo $_GET["y"];?></option>
  68.     <?php
  69.                 $year = date("Y");
  70.                 $i = $year-1;
  71.                 while ($i < $year+4) {
  72.                     echo '<option>'.$i.'</option>';
  73.                     $i++;
  74.                 }
  75.                 ?>
  76.     </select>
  77.     <span style="margin-left:3px; margin-right:3px;"> to </span>
  78.         <select name="to_mo">
  79.     <option><?php echo $monthrangeend;?></option>
  80.     <option>Jan</option>
  81.     <option>Feb</option>
  82.     <option>Mar</option>
  83.     <option>Apr</option>
  84.     <option>May</option>
  85.     <option>Jun</option>
  86.     <option>Jul</option>
  87.     <option>Aug</option>
  88.     <option>Sep</option>
  89.     <option>Oct</option>
  90.     <option>Nov</option>
  91.     <option>Dec</option>
  92.     </select>
  93.     <select name="to_yr">
  94.     <option><?php echo $yearplustwo;?></option>
  95.     <?php
  96.                 $year = date("Y");
  97.                 $i = $year-1;
  98.                 while ($i < $year+4) {
  99.                     echo '<option>'.$i.'</option>';
  100.                     $i++;
  101.                 }
  102.                 ?>
  103.     </select>
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Fantastic! Glad you did find a solution, and thanks for posting how you did it. Looks like you ended up doing a combo of PHP and JavaScript just like I think I would have done :)

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 100 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.