hiding select element

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Da_Elf
Forum Commoner
Posts: 81
Joined: Mon Dec 29, 2008 12:31 pm

hiding select element

Post by Da_Elf »

Ok i want to setup select boxes for year, month and day. it starts with only year showing. when anything other than index0 is selected them month appears. same for that then day appears. if i set month back to index0 then day resets to index0 and hides itself like i want. however when i set year to index0 the month resets and hides but the day only resets and doesnt hide.

Code: Select all

<?php
include 'servlog.php';
if (isset($_POST['add'])) {
if (is_numeric(mysql_real_escape_string($_POST['logyear']))){$lys = mysql_real_escape_string($_POST['logyear']);}
if (is_numeric(mysql_real_escape_string($_POST['logmonth']))){$lms = mysql_real_escape_string($_POST['logmonth']);}
if (is_numeric(mysql_real_escape_string($_POST['logday']))){$lds = mysql_real_escape_string($_POST['logday']);}
}

?>
<script type="text/javascript">
function fromDate(){
	var yx=document.getElementById("logyear").selectedIndex;	
	var mx=document.getElementById("logmonth").selectedIndex;
	if (yx != 0){
		document.getElementById('logmonth').style.display="inline";
		document.getElementById('logmonth').disabled=false;
		}
	else {		
		document.logfilters.logday.selectedIndex = "0";
		document.getElementById('logday').style.display="none";
		document.getElementById('logday').disabled=true;
		document.logfilters.logmonth.selectedIndex = "0";
		document.getElementById('logmonth').style.display="none";
		document.getElementById('logmonth').disabled=true;
		}	
	if (mx != 0){
		document.getElementById('logday').style.display="inline";
		document.getElementById('logday').disabled=false;
		}
	else {		
		document.logfilters.logday.selectedIndex = "0";
		document.getElementById('logday').style.display="none";
		document.getElementById('logday').disabled=true;
		}
}
</script>
<form name="logfilters" action="" method="post">
<select id="logyear" name="logyear" onchange="fromDate()">
	<option value="">YEAR</option>
    <?php $staryear = 2010;
	$endyear = date('Y');
	for ($sy=$staryear; $sy<=$endyear; $sy++){?> 
    <option value="<?=$sy?>" <?php if ($lys == $sy){ echo "selected='selected'";} ?>><?=$sy?></option>
    <?php }?>
</select>
<select id="logmonth" name="logmonth" style="display:none" disabled="disabled" onchange="fromDate()">
	<option value="">MONTH</option>
    <?php $starmonth = 1;
	$endmonth = 12;
	for ($sm=$starmonth; $sm<=$endmonth; $sm++){?> 
    <option value="<?=$sm?>" <?php if ($lms == $sm){ echo "selected='selected'";} ?>><?=$sm?></option>
    <?php }?>
</select>
<select id="logday" name="logday" style="display:none" disabled="disabled">
	<option value="">DAY</option>
    <?php $starday = 1;
	$endday = 31;
	for ($sd=$starday; $sd<=$endday; $sd++){?> 
    <option value="<?=$sd?>" <?php if ($lds == $sd){ echo "selected='selected'";} ?>><?=$sd?></option>
    <?php }?>
</select>
<br />
<input type="submit" name="add" value="Sort" />
</form>
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: hiding select element

Post by mecha_godzilla »

Hi,

I think the problem is that because you have two if() tests, the day selection option is being hidden as expected in the first if() test but is then switched back on again in the second if() test; when you call the fromDate() option it might be better to check which menu called the function and only run one of the if() tests. While you're trying to resolve the problem, it might be a good idea to put some alert()s in each branch of the two if() tests to see what's happening. Because of the way browsers and their graphics libraries work, a menu can be hidden in one part of the code and then displayed in another part of the code without it looking like it was ever hidden in the first place, because of the speed at which the operation is carried out by the JavaScript engine. If you put alerts()s before and after a specific action, you can artificially slow down the process. Of course, echo()ing out variables to the browser is generally frowned upon when talking about good programming practice, but just do whatever you need to to solve the problem :mrgreen:

HTH,

Mecha Godzilla
Da_Elf
Forum Commoner
Posts: 81
Joined: Mon Dec 29, 2008 12:31 pm

Re: hiding select element

Post by Da_Elf »

thanks. i seperated them into seperate scripts giving this.. i put in some variables

Code: Select all

function yDate(agg,bgg,cgg){
	var yx=document.getElementById(cgg).selectedIndex;
	if (yx != 0){
		document.getElementById(bgg).style.display="inline";
		document.getElementById(bgg).disabled=false;
		}
	else {
		document.logfilters.logday.selectedIndex = "0";
		document.logfilters.logmonth.selectedIndex = "0";
		document.getElementById(agg).style.display="none";
		document.getElementById(agg).disabled=true;
		document.getElementById(bgg).style.display="none";
		document.getElementById(bgg).disabled=true;
		}
}
function mDate(ahh,bhh){	
	var mx=document.getElementById(bhh).selectedIndex;
	if (mx != 0){
		document.getElementById(ahh).style.display="inline";
		document.getElementById(ahh).disabled=false;
		}
	else {
		document.logfilters.logday.selectedIndex = "0";		
		document.getElementById(ahh).style.display="none";
		document.getElementById(ahh).disabled=true;
		}
}
i tried to make 1 more addition of a variable but then it doesnt work.. i tried to create this line
var vhh = 'document.logfilters.'+ahh+'.selectedIndex = ';vhh+"0";
but it doesnt work though. any ideas on this?
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: hiding select element

Post by mecha_godzilla »

Hi,

I think there's probably a simpler way to do this - where you have the two lines of code that look like this

Code: Select all

<select id="logyear" name="logyear" onchange="fromDate()">
<select id="logmonth" name="logmonth" style="display:none" disabled="disabled" onchange="fromDate()">
change them to this

Code: Select all

<select id="logyear" name="logyear" onchange="fromDate(this)">
<select id="logmonth" name="logmonth" style="display:none" disabled="disabled" onchange="fromDate(this)">
You can then use this value in your function to tell which selection menu is calling it

Code: Select all

function fromDate(whichMenu){

if (whichMenu.name == 'logyear') {
/* if() test #1 */
}
if (whichMenu.name == 'logmonth') {
/* if() test #2 */
}

}
I've just updated the script you originally posted with these amendments and it appears to be working correctly.

HTH,

M_G
joy9393
Forum Newbie
Posts: 1
Joined: Fri Oct 31, 2014 7:18 am

Re: hiding select element

Post by joy9393 »

While you're trying to resolve the problem, it might be a good idea to put some alert()s in each branch of the two if() tests to see what's happening. Because of the way browsers and their graphics libraries work, a menu can be hidden in one part of the code and then displayed in another part of the code without it looking like it was ever hidden in the first place, because of the speed at which the operation is carried out by the JavaScript engine. If you put alerts()s before and after a specific action,
Save your time and get Braindumps You can get our 100% Android certification practice test Adams State University Also get free demos of University of California, Berkeley
Post Reply