Hello,
I downloaded the code from this page (http://www.javascriptkit.com/script/script2/curdateform2.shtml) to use for a calendar on a booking form. The calendar should enable the user to select “Arrival Date” and “Departure Date”. But when I placed the code in the Dreamweaver document, only the Arrival Date appears correctly, while the Departure Date is blank (I did a copy-paste in Design Mode from “Arrival Date” to “Departure Date”).
I know this is due to my lack of knowledge of Javascript, and I imagine there is a quick fix. Would be much grateful if someone could kindly help me out.
I have attached a browser screen shot (Firefox).
Below is the code from my page:
From
<head>:
.bookingform {
width: 700px;
margin-left: 20px;
}
-->
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17804371-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
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, 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>
From
<body>:
<td>Arrival date</td>
<td><form action="" name="someform">
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select);
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
</td>
</tr>
<td>Departure date</td>
<td><form action="" name="someform">
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
</td>
<tr>
<td>Message</td>
<td><form id="form3" name="form3" method="post" action="">
<label>
<textarea name="message" id="message" cols="45"></textarea>
</label>
</form> </td>
</tr>
<tr>
<td> </td>
<td><form id="form4" name="form4" method="post" action="">
<label>
<input type="submit" name="submit" id="submit" value="Submit" />
</label>
<label>
<input type="submit" name="reset" id="reset" value="Reset" />
</label>
</form></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
