[RESOLVED] Toggle hide/show form element code not working
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!
Re: Toggle hide/show form element code not working
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>
Re: Toggle hide/show form element code not working
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?
Re: Toggle hide/show form element code not working
Quote:
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.
Re: Toggle hide/show form element code not working
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>
Re: Toggle hide/show form element code not working
Thanks! That works just great :)
