...

View Full Version : Populate A Text Box Based On A Menu Selection



Candrias77
12-23-2003, 10:11 AM
Let me explain my situation...

I have an event search option on a site, people can narrow their search results by entering a start and end date such as:


Search For Events Between:
<input value="dd/mm/yy"> and <input value="dd/mm/yy">Now I also want to have a drop down that lists the next six months, lets say:


<select name="select">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
</select>What I would like is that when someone selects a month from the drop down list (say February), the start and end dates of the two input boxes is automatically filled in with the start and end dates of February (or what ever month is selected). So the boxes would look something like this:


Search For Events Between:
<input value="01/02/04"> and <input value="31/02/04">My pages are in PHP so I can dynamically generate the form variables and dates, etc. My problem is that I don't know much javascript and have no idea where to start makeing a script like this.

Any help is appreciated.

Thanks

Kor
12-23-2003, 10:41 AM
Try something like below (you may remove the //comentaries,they are only for you to see what the code lines are there for:



<html>
<head>
<script>
function bla(){
//sets the value of selected index (0-selection.lenght)
var sel = document.forms[0].se.selectedIndex;
//sets the value of month according to the selected index
var mm = '0'+sel;
verify if a month is selected
if (sel == 0){
alert('choose a month, please!');
document.forms[0].ini.value = 'dd/mm/yy';
document.forms[0].fin.value = 'dd/mm/yy';
return false
}
//sets the last day for Jan, Mar, May
else if (sel == 1 || sel==3 || sel==5){
var ff=31;
}
//sets the last day for Feb
else if (sel == 2){
var ff = 29;
}
//sets the last day for April, June
else {
var ff = 30;
}

//sets the values for the inputs
var vini = '01/'+mm+'/04';
var vfin = ff+'/'+mm+'/04';
document.forms[0].ini.value = vini;
document.forms[0].fin.value = vfin;
return true;
}
</script>
</head>

<body>
<form>
<select name="se" onchange="return bla()">
<option selected>select a month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
</select>
<br>
<br>
<input name="ini" value="dd/mm/yy"> and <input name ="fin" value="dd/mm/yy">
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum