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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic day drop-down list (depending on the year and month)

    Hi. I'm new to JavaScript and I'm trying to create a sample registration form. One of the task is to display a drop-down menu of days depending on the month and year entered in the preceding fields. Obviously, the number of days in each month and year (only during February) differ.

    So I browsed for online solutions and found this: http://javascript.about.com/library/bldateselect.htm

    The sample in the site worked perfectly, but it didn't in my case. I included the JavaScript at the bottom of the day menu, as it indicated. The difference between my work and the one in that page is that I populated the year and months by also using JavaScript. I'm not certain if that will have a different outcome from having the fields outside the <script> tag.

    Here's the code snippet of my work:
    Code:
    <body>
          <form action="process.html" method="post" enctype="multipart/form-data" name="registrationform" id="registrationform" onLoad="populateMonth()">
          
    	 <img src="banner.gif">
    	 <br />
    	 
    	 <table class="outer" width = 650 height = 100>
    	    <th>
    <tr>
    		     <th width="160" scope="col" class="right">Birthdate</th>
    		     <th width="240" scope="col" class="left">
    			<script type="text/javascript">
    			   var codeYear = "";
    			   codeYear += "<select id='birthYear'>";
    			   codeYear += "<option value='--'>- Year -</option>"			 
    					
    			   for(var i = 2012; i >= 1900; i--)
    			      codeYear += "<option value='" + i + "' >" + i + "</option>";
    			   
    			   codeYear += "</select>";
    			   document.write(codeYear);
    			</script>
    		     </th>
    		  </tr>
    		  
    		  <tr>
    		     <th width="160" scope="col" class="right"></th>
    		     <th width="240" scope="col" class="left">
    			<script type="text/javascript">
    			   var month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", 
    						"October", "November", "December");
    			   var codeMonth = "";
    			   codeMonth += "<select id='birthMonth' >";
    			   codeMonth += "<option value='--'>- Month -</option>"			 
    					
    			   for(var i = 0; i <= 11; i++)
    			      codeMonth += "<option value='" + (i + 1) + "' >" + month[i] + "</option>";
    			   
    			   codeMonth += "</select>";
    			   document.write(codeMonth);
    			</script>
    		     </th>
    		  </tr>
    		  
    		  <tr>
    		     <th width="160" scope="col"></th>
    		     <th width="240" scope="col" class="left">
    			<script type="text/javascript">
    			   var codeDay = "";
    			   codeDay += "<select id='birthDay'>";
    			   codeDay += "<option value='--'>- Day -</option>"			 
    					
    			   for(var i = 1; i <= 31; i++)
    			      codeDay += "<option value='" + i + "' >" + i + "</option>";
    			   
    			   codeDay += "</select>";
    			   document.write(codeDay);
    			</script>
    		     </th>
    		  </tr>
    		  
    		  <script type="text/javascript">
    		     function daysInMonth(month,year) {
    			var dd = new Date(year, month, 0);
    			return dd.getDate();
    		     } 
    		     function setDayDrop(dyear, dmonth, dday) {
    			var year = dyear.options[dyear.selectedIndex].value;
    			var month = dmonth.options[dmonth.selectedIndex].value;
    			var day = dday.options[dday.selectedIndex].value;
    			if (day == ' ') {
    			   var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
    			   dday.options.length = 0;
    			   dday.options[dday.options.length] = new Option(' ',' ');
    			   for (var i = 1; i <= days; i++) 
    			dday.options[dday.options.length] = new Option(i,i);
    			}
    		     }
    		     function setDay() {
    			var year = document.getElementById('birthYear');
    			var month = document.getElementById('birthMonth');
    			var day = document.getElementById('birthDay');
    			setDayDrop(year,month,day);
    		     }
    		     document.getElementById('birthYear').onchange = setDay;
    		     document.getElementById('birthMonth').onchange = setDay;
    		  </script>
    	    </th>
    	 </table>
          </form>
       </body>
    BTW, I used <table>, <tr>, and <th> tags for the layout.

    So, why is the JavaScript for dynamic days not working? What part of the code can I tweak to get results the same with that in the site above? Is there a way to fix it without doing away with the JavaScript for populating year and month values? Thanks in advance for any form of help.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You could try this instead:-


    Code:
    <html>
    <head>
    
    <script  type="text/javascript">
    // populate the years select list
    var codeYear = "";
    codeYear += "<select id='year1' onchange=\"SelDate('day1','month1','year1');\">";
    codeYear += "<option value='--'>- Year -</option>"			 
    for (var i = 2012; i >= 1900; i--) {
    codeYear += "<option value='" + i + "' >" + i + "</option>";
    }			   
    codeYear += "</select>";
    document.write(codeYear);
    
    function SelDate(d,m,y) {
    var dy=document.getElementById(d);
    var mth=document.getElementById(m);
    var yr=document.getElementById(y);
    dy.options.length=1;
    if (mth.value && yr.value) {
    var days=new Date(yr.value,mth.value,1,-1).getDate(); // the first day of the next month minus 1 hour
    for (var i=1; i<=days; i++){
    dy.options[i] = new Option(i,i,true,true);
    }
    dy.selectedIndex = 0;
    }
    }
    </script>
    </head>
    
    <body>
    
    <select id="month1" onchange="SelDate('day1','month1','year1');">
    <option >Month</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
    </select>
    
    <select id="day1" >
    <option >Day</option>
    </select>
    </body>
    
    </html>
    Quizmaster: What was the name of the Queen in the Victorian era?
    Contestant: er.. Elizabeth?
    Last edited by Philip M; 07-14-2012 at 04:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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