Back To Programming / Scripting / Coding Forum

Auto-populate HTML Drop Down Menus

  • mbenken
  • Born
  • Born
  • No Avatar
  • Joined: Feb 24, 2011
  • Posts: 2
  • Status: Offline

Post February 24th, 2011, 8:41 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 24th, 2011, 8:41 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 16th, 2011, 11:59 am

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.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • mbenken
  • Born
  • Born
  • No Avatar
  • Joined: Feb 24, 2011
  • Posts: 2
  • Status: Offline

Post March 16th, 2011, 1:47 pm

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.     }
  48.         ?>
  49.     <form name="your form name" method="get" action="some action here">
  50.     
  51.     <span style="margin-right:3px;">Date Range (max range: 24 months)</span><br />
  52.         <select name="from_mo" id="frommo">
  53.     <option><?php echo $_GET["m"];?></option>
  54.     <option>Jan</option>
  55.     <option>Feb</option>
  56.     <option>Mar</option>
  57.     <option>Apr</option>
  58.     <option>May</option>
  59.     <option>Jun</option>
  60.     <option>Jul</option>
  61.     <option>Aug</option>
  62.     <option>Sep</option>
  63.     <option>Oct</option>
  64.     <option>Nov</option>
  65.     <option>Dec</option>
  66.     </select>
  67.     <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">
  68.         <option><?php echo $_GET["y"];?></option>
  69.     <?php
  70.                 $year = date("Y");
  71.                 $i = $year-1;
  72.                 while ($i < $year+4) {
  73.                     echo '<option>'.$i.'</option>';
  74.                     $i++;
  75.                 }
  76.                 ?>
  77.     </select>
  78.     <span style="margin-left:3px; margin-right:3px;"> to </span>
  79.         <select name="to_mo">
  80.     <option><?php echo $monthrangeend;?></option>
  81.     <option>Jan</option>
  82.     <option>Feb</option>
  83.     <option>Mar</option>
  84.     <option>Apr</option>
  85.     <option>May</option>
  86.     <option>Jun</option>
  87.     <option>Jul</option>
  88.     <option>Aug</option>
  89.     <option>Sep</option>
  90.     <option>Oct</option>
  91.     <option>Nov</option>
  92.     <option>Dec</option>
  93.     </select>
  94.     <select name="to_yr">
  95.     <option><?php echo $yearplustwo;?></option>
  96.     <?php
  97.                 $year = date("Y");
  98.                 $i = $year-1;
  99.                 while ($i < $year+4) {
  100.                     echo '<option>'.$i.'</option>';
  101.                     $i++;
  102.                 }
  103.                 ?>
  104.     </select>
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 16th, 2011, 4:54 pm

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 :)
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 224 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.