[RESOLVED] Toggle hide/show form element code not working

**wwwfilmfilercom** · Nov 30th, 2008, 01:17 PM

I've taken some code from here:

http://www.webwinnerdesigns.com/js-s...orm.html#myrow

To help show/hide a form element. What I have is a link and clicking it will open another form containing a text input and button:

Code:

<form id="form" name="form" action="<?php echo $PHP_SELF;?>" method="post">
<label>Email</label><input type="text" name="email" id="email" />
<label>Password</label><input type="password" name="password" id="password" />
<input name="login" value="Login" type="submit"><br />
<a href="#forgotten" onClick="toggle_it('forgotten')">Cant remember</a> | <a href="index.php#register">Register</a>
<form id="forgotten">
<label style="display:none;">Email</label><input type="text" name="forgotten" style="display:none;" />
<input name="remind" value="Remind" type="submit" style="display:none;"><br />
</form>

So as you can see, there are 2 forms. The first form has a link 'cant remember' which on click will open form 2, thus allowing the user to submit their email for forgotten password link.

At the moment the show/hide is just not working. I've tried adding 'id=forgotten' to each element in the form, to only one element, to just the form - nothing is working.

How can I fix this??

By the way, the toggle script is:

Code:

<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = '';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>

Any help would be awesome - thanks!

**Nightwalker83** · Dec 1st, 2008, 02:17 AM

Try this (code taken from post #1):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = '';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>

<style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10; }
.style7 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
-->
</style> 
</head>
<body>
<form id="form" name="form" action="<?php echo $PHP_SELF;?>" method="post">
<label>Email</label><input type="text" name="email" id="email" />
<label>Password</label><input type="password" name="password" id="password" />
<input name="login" value="Login" type="submit"><br />
<a href="#forgotten" onClick="toggle_it('forgotten')">Cant remember</a> | <a href="index.php#register">Register</a>
<form id="forgotten">
<label style="display:none;">Email</label><input type="text" name="forgotten" style="display:none;" />
<input name="remind" value="Remind" type="submit" style="display:none;"><br />
</form>
</div>
</body>
</html>

**wwwfilmfilercom** · Dec 1st, 2008, 03:01 AM

It just doesn't do anything - I checked the error console and the error I'm getting is:

Code:

document.getElementById(itemID) is null

Any thoughts on why this is? I'm guessing the form cannot be passed this way or something like that?

**Nightwalker83** · Dec 1st, 2008, 04:17 AM

Originally Posted by wwwfilmfilercom

Any thoughts on why this is? I'm guessing the form cannot be passed this way or something like that?

Yeah, that might be the case! I tried wrapping the form in a table and it still did not work.

**MarkT** · Dec 1st, 2008, 06:40 AM

I would place the items inside a div and then show or hide that.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
	if ((document.getElementById(itemID).style.display == 'none'))
		{
		document.getElementById(itemID).style.display = '';
		} 
	else 
		{
		document.getElementById(itemID).style.display = 'none';
		}
	}
</script>
</head>
<body>
	<form id="form" name="form" action="<?php echo $PHP_SELF;?>" method="post">
		<label>Email</label><input type="text" name="email" id="email" />
		<label>Password</label><input type="password" name="password" id="password" />
		<input name="login" value="Login" type="submit" ID="Submit1"><br />
		<a href="#forgotten" onClick="toggle_it('forgotten')">Cant remember</a> | <a href="index.php#register">Register</a>
		
		<div id='forgotten' style="display:none;">
			<label>Email</label><input type="text" name="forgotten"  ID="Text1"/>
			<input name="remind" value="Remind" type="submit"  ID="Submit2"><br />
		</div>
	</form>
</body>
</html>

**wwwfilmfilercom** · Dec 1st, 2008, 12:29 PM

Thanks! That works just great

Thread: [RESOLVED] Toggle hide/show form element code not working

Thread Tools

Display

[RESOLVED] Toggle hide/show form element code not working

Re: Toggle hide/show form element code not working

Re: Toggle hide/show form element code not working

Re: Toggle hide/show form element code not working

Re: Toggle hide/show form element code not working

Re: Toggle hide/show form element code not working

Posting Permissions