abaliable fields

[corillo181]

i try to do this with php but i guess i can post a javascript must be on for the page.

 

but my idea is.

 

have 3 list menu

 

[year] [month] [day]

 

but when someone goes in to the page only going to see year list

 

[year]

 

 

once year is selected the month will appear

 

[2007][month]

 

once the month is selected the day will become available

 

[2007[june][day]

 

and when they select the day. they can submit.

 

[emehrkay]

a lil js and css will do the trick

 

for the ones that you dont want to show up right away add

 

visibility: hidden;

 

to their css definitions. that is diffent than display:none as that would take the element out of the flow of the markup

 

make sure each dropdown has a unique id ex

 

id="drop_year" drop_month drop_day

 

very simple onload

 

onload = function(){

 

var year = document.getElementById('drop_year');

var month = document.getElementById('drop_month');

var day = document.getElementById('drop_day');

 

year.onchange = function(){

if(year.value != ''){ //or whatever you set as the default value

month.styles.visibility = 'visible';

}

}

 

month.onchange = function(){

if(month.value != ''){ //or whatever you set as the default value

day.styles.visibility = 'visible';

}

}

}

 

i havent tested it, but it will work. the only issue may be my spelling. good luck

[corillo181]

thats great man

 

and very well explain i had a clue on how to go about it but this is the exact execution of what i had in mind.

[corillo181]

i tried it but it does not work

<?
$thisyear=date("Y");
$thismonth=(int)date("m");
?>
<script language="javascript">
onload = function(){

var year = document.getElementById('year');
var month = document.getElementById('month');
var day = document.getElementById('day');

year.onchange = function(){
if(year.value != ''){ //or whatever you set as the default value
month.styles.visibility = 'visible';
}
}

month.onchange = function(){
if(month.value != ''){ //or whatever you set as the default value
day.styles.visibility = 'visible';
}
}
}
</script>

<form action="" method="get">
  <label>year
  <select name="year" id="year">
<option value="<?=$thisyear?>" selected="selected"><?=$thisyear?></option>
<option value="<? echo $thisyear+1 ?>"><? echo $thisyear+1 ?></option>
  </select>
  </label>
  <label>month
  <select name="month" id="month">
<?
$jd=cal_to_jd(CAL_GREGORIAN,date("m"),date(1),date("Y"));
$monthname=jdmonthname($jd,1);

$array=array(1=>'January','February','March','April','May','June','July','August','September','October','November','December');
$start = $thismonth;

for($i = $start; $i < count($array); $i++){
?>

<option value="<?=$i ?>"><?=$array[$i] ?></option>

<?
}

?>
</select>
  </label>
  <label>days
  <select name="day" id="day">
    <option value="1" selected="selected">1</option>
<?
$numdaysinmonth=cal_days_in_month(CAL_GREGORIAN,$thismonth,$thisyear);
for($count=1;$count<=$numdaysinmonth;$count++){?>
<option value="<?=$count?>"><?=$count?></option>
<?
}
?>
  </select>
  </label>
  
</form>

[emehrkay]

your drop downs dont have ids

 

get element by id

[corillo181]

those are not id?

 

id="month"

id="year"

[emehrkay]

ok, sorry about that.

 

there were errors in my code. i used styles instead of style. i also added alerts to make sure that the events fire, take them out

 

<script type="text/javascript">
onload = function(){

var year = document.getElementById('drop_year');
var month = document.getElementById('drop_month');
var day = document.getElementById('drop_day');
var sBut = document.getElementById('submit');

year.onchange = function(){
	alert('year change');
	if(year.value != ''){ //or whatever you set as the default value
		month.style.visibility = 'visible';
	}
}

month.onchange = function(){
	alert('month change');
	if(month.value != ''){ //or whatever you set as the default value
		day.style.visibility = 'visible';
	}
}

day.onchange = function(){
	alert('day change');
	if(day.value != ''){ //or whatever you set as the default value
		submit.style.visibility = 'visible';
	}
}
}
</script>

[corillo181]

alright this works, 2 more question and i should be done with what i want to do..

 

 

isn't defining a var in javascript the equivalent as in others programming language?

 

because i try to do this. but the values are not passed on.

 

onload = function(){

var year = document.getElementById('drop_year');
var month = document.getElementById('drop_month');
var day = document.getElementById('drop_day');
var sBut = document.getElementById('submit');	
}

it wont affect the next function

onload = function(){

year.onchange = function(){
	alert('year change');
	if(year.value != '2007'){ //or whatever you set as the default value
month.style.display = "none";	
}
}

 

another question is, when making statement isn't it the equivalent as other language? why this does not work?

year.onchange = function(){
	alert('year change');
	if(year.value != '2007'){ //or whatever you set as the default value
month.style.display = "none";			
	}else if(year.value == 2007){
month.style.display = "display";	
}
}