Can't get date drop down script working

JavaScript
1

I having a problem manipulating a script I got off the web which generates date drop downs. I want to have a form that produces results for 2 dates. For some reason it only displays one or the other. I’m new to javascript, can anyone show me what I’m doing wrong please?

<html>
<head>
<script type="text/javascript">
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i+1, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>
<script type="text/javascript">
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdownend(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i+1, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>
</head>
<body>
<p>Between Dates</p>
 <form action="betweendatesresult.php" name="someform">
<select id="daydropdown">
</select> 
<select id="monthdropdown">
</select> 
<select id="yeardropdown">
</select> 

 and 

<select id="daydropdownend">
</select> 
<select id="monthdropdownend">
</select> 
<select id="yeardropdownend">
</select> 
</form>

<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<script type="text/javascript">

//populatedropdownend(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdownend("daydropdownend", "monthdropdownend", "yeardropdownend")
}
</script>
</div>
</body>
</html>

You can view the page here. I got the original script [URL=“http://www.javascriptkit.com/script/script2/curdateform2.shtml”]here

2

Firstly, it was not necessary to duplicate the function (although you did correctly ‘rename’ the second one).
You can call the same function in both forms; since you must pass the ID of the element for the dropdown.
You have also (unnecessarily) redeclared the array ‘monthtext’.
Actually, it appears your problem is the redeclaration of all the global variables (those with ‘var’ in front of them) in the second function.

Try simply calling the same function a second time, passing it the new set of IDs for the other dropdown.

If you need more help, PM me and I will get it working for you.

3 
<html>
<head>
<script type="text/javascript">
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i+1, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>
</head>
<body>
<p>Between Dates</p>
 <form action="betweendatesresult.php" name="someform">
<select id="daydropdown">
</select> 
<select id="monthdropdown">
</select> 
<select id="yeardropdown">
</select> 

 and 

<select id="daydropdownend">
</select> 
<select id="monthdropdownend">
</select> 
<select id="yeardropdownend">
</select> 
</form>

<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
populatedropdown("daydropdownend", "monthdropdownend", "yeardropdownend")
}
</script>
</div>
</body>
</html>

Excellent, that did the trick, thanks very much for your help! Had a feeling I didn’t need to use a duplicate script. Cheers!

4

hello
i am using the same script and it populate the dropdowns correctly
but i have a problem when i submit the values selected
the values are always empty
did u face this ?
thanks alot

5

Show us what you’re doing and we can help to answer why

6

this script is saved in a file script.js

var monthtext=[‘Jan’,‘Feb’,‘Mar’,‘Apr’,‘May’,‘Jun’,‘Jul’,‘Aug’,‘Sept’,‘Oct’,‘Nov’,‘Dec’];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)

for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i+1, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today’s day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthnumber[m])

monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today’s month
var thisyear=today.getFullYear()
for (var y=0; y<80; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today’s year
}

and this is the aspx page
<%@ Page Language=“C#” MasterPageFile=“default.Master” AutoEventWireup=“true” Codebehind=“step2.aspx.cs”
Inherits=“fanClub.create.step2” Title=“Untitled Page” %>
<asp:Content ID=“Content1” ContentPlaceHolderID=“ContentPlaceHolder1” runat=“server”>

<script type=“text/javascript”>

window.onload=function(){
populatedropdown(“ctl00_ContentPlaceHolder1_daydropdown”, “ctl00_ContentPlaceHolder1_monthdropdown”, “ctl00_ContentPlaceHolder1_yeardropdown”)
}
</script>

<select id=“daydropdown” runat=“server”></select>
<select id=“monthdropdown” runat=“server”></select>
<select id=“yeardropdown” runat=“server”></select>
and here is the code behind
DateTime birthdate = Convert.ToDateTime(monthdropdown.Value + “/” + daydropdown.Value + “/” + yeardropdown.Value);

I put the path to js file in default.master

The problem is that i get empty strings in monthdropdown.value,daydropdown.Value and yeardropdown.Value

i hope i clarified

thanks alot

7 

window.onload=function()
{
	populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
8

but the controls runat server…thats why i write their id at server side