[mysticDragon]

I am trying to access the style attribute of a element in order to display a form however, I get this error: Uncaught TypeError: Cannot read property 'style' of undefined. The example below is a simplified example.

cookies.php

<?php
echo "<a href='test.php?flavor=oatmeal-raisin'>Bake Oatmeal Raisin Cookies</a>";

echo "<a href='test.php?flavor=butter'>Bake Butter Cookies</a>";

echo "<a href='test.php?flavor=chocolate'> Bake Chocolate Cookies </a>";
?>

test.php

<?php
$cookieType=$_GET['flavor'];

switch($cookieType){

	case "chocolate":
		echo "<script type='text/javascript'>";
		echo "document.chocolate.style.display='block'; ";
		echo "</script>";
	break;
	case "oatmeal-raisin":
		echo "<script type='text/javascript'>";
		echo "document.oatmealraisin.style.display='block'; ";
		echo "</script>";
	break;
	case "butter":
		echo "<script type='text/javascript'>";
		echo "document.butter.style.display='block'; ";
		echo "</script>";
	break;
}

?>

<div id="chocolate" style="display:none;">
	<form action="<?php echo $_SERVER['php_self']?>">
		<input type="hidden" name="type" value="chocolate"/>
		What is your name: <input type="text" name="your_name"/>
		How many chocolate chips on each cookie? <input type="text" name="chips"/>
		How many many cookies? <input type="text" name="cookies"/>
		<input type="submit" name="BAKE!"/>
		<input type="reset"/>
	</form>
</div>

<div id="oatmealraisin" style="display:none;">
	<input type="hidden" name="type" value="oatmealraisin"/>
	<form action="<?php echo $_SERVER['php_self']?>">
		What is your name: <input type="text" name="your_name"/>
		How many raisins on each cookie? <input type="text" name="raisins"/>
		How many many cookies? <input type="text" name="cookies"/>
		<input type="submit" name="BAKE!"/>
		<input type="reset"/>
	</form>
</div>

<div id="butter" style="display:none;">
	<form action="<?php echo $_SERVER['php_self']?>">
		<input type="hidden" name="type" value="butter"/>
		What is your name: <input type="text" name="your_name"/>
		How many many cookies? <input type="text" name="cookies"/>
		<input type="submit" name="BAKE!"/>
		<input type="reset"/>
	</form>
</div>

<?php

if(isset($_GET['BAKE!'])){
$type = $_GET['type'];

switch($type){
	case "chocolate":
		"Your cookies are done! ".$_GET['your_name']. " Enjoy your chocolate cookies";
	break;
	case "oatmealraisin":
		"Your cookies are done! ".$_GET['your_name']. " Enjoy your chocolate cookies";
	break;
	case "butter":
		"Your cookies are done! ".$_GET['your_name']. " Enjoy your chocolate cookies";
	break;
}	
}

?>

I have never had problems accessing the style attribute of a element before so I am not sure what is the problem. The switch statement does work because the javascript console shows the output of the right case. I need another pair of eyes. Any suggestions?

[Dormilich]

a ) you try to access an element before it’s created
b ) the element access is invalid (mind you have 3 different forms)

This post has been edited by Dormilich: 19 July 2010 - 09:33 PM

[mysticDragon]

But I am accessing the div id. The form is within the div. And I have tried putting the first php section after the html however, the result is the same.

[PsychoCoder]

If I'm not mistaken you need to reference the form then the control name, so this code

<?php
$cookieType=$_GET['flavor'];

switch($cookieType){

	case "chocolate":
		echo "<script type='text/javascript'>";
		echo "document.chocolate.style.display='block'; ";
		echo "</script>";
	break;
	case "oatmeal-raisin":
		echo "<script type='text/javascript'>";
		echo "document.oatmealraisin.style.display='block'; ";
		echo "</script>";
	break;
	case "butter":
		echo "<script type='text/javascript'>";
		echo "document.butter.style.display='block'; ";
		echo "</script>";
	break;
}

?>

Should probably look like this

<?php
$cookieType=$_GET['flavor'];

switch($cookieType){

	case "chocolate":
		echo "<script type='text/javascript'>";
		echo "document.forms[0].elements["chocolate"].style.display='block'; ";
		echo "</script>";
	break;
	case "oatmeal-raisin":
		echo "<script type='text/javascript'>";
		echo "document.forms[1].elements["oatmealraisin"].style.display='block'; ";
		echo "</script>";
	break;
	case "butter":
		echo "<script type='text/javascript'>";
		echo "documentforms[2].elements["butter"].style.display='block'; ";
		echo "</script>";
	break;
}

?>

[Dormilich]

you cannot reference form element by values. it should look more like

<?php
$cookieType=$_GET['flavor'];
$script = 'document.forms[%d].elements["type"].style.display="block";';

echo "<script type='text/javascript'>";
switch($cookieType){

	case "chocolate":
		printf($script, 0);
	break;
	case "oatmeal-raisin":
		printf($script, 1);
	break;
	case "butter":
		printf($script, 2);
	break;
}
echo "</script>";
?>

This post has been edited by Dormilich: 19 July 2010 - 10:55 PM

[mysticDragon]

Okay, I got it to work. I changed the switch code to

switch($cookieType){

	case "chocolate":
		echo '<script type="text/javascript">';
		echo 'document.getElementById("chocolate").style.display="block"; ';
		echo '</script>';
	break;
	case "oatmealraisin":
		echo '<script type="text/javascript">';
		echo 'document.getElementById("oatmealraisin").style.display="block"; ';
		echo '</script>';
	break;
	case "butter":
		echo '<script type="text/javascript">';
		echo 'document.getElementById("butter").style.display="block"; ';
		echo '</script>';
	break;
}

and I took Dormilich initial suggestion about moving the code after the html code so the html can be created first before accessing it. So I pushed the switch statement after the html. Thanks a lot.