[SOLVED] Hiding a form with Javascript.

bobleny · June 8, 2007

I am having a bit of a problem. I want to hide a form based on Javascript.

Here is my HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript">
		<!--
			//Define HttpRequest
			function GetAJAX()
			{
				var ajax = null;

				try
				{
					//Firefox, Opera 8.0+, Safari
					ajax = new XMLHttpRequest();
				}
				catch (e)
				{
					//Internet Explorer
					try
					{
						ajax = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (e)
					{
						ajax = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}

				return ajax;
			}

			//Check for AJAX
			var problem = GetAJAX();
			if (problem == null)
			{
				var error == "true";
			}
		-->
	</script>
	<link href="css.css" rel="stylesheet" type="text/css" />
	<title>Home - Go MAD</title>
</head>
<body>
	<div id="main_body">

		<!-- Start of Header -->
		<div id="header">
			<div id="header_nav">
				<div class='nav_selected'>Home Page</div><a href='index.php?page=base' class='nav_links'>Knowledge Base</a>
			</div>
		</div>
		<!-- End of Header -->

		<!-- Start of Right Panel -->

		<div id="right_panel">
			<div class="right_panel_box">
				<div class="right_panel_text_lable">Related Links</div>
				<div class='right_panel_link'><a href='http://www.google.com' class='right_panel_link'>Google</a></div>
				<div class='right_panel_link'><a href='http://www.yahoo.com' class='right_panel_link'>Yahoo!</a></div>
			</div>

			<script src='login_box.js'></script>	
		</div>
		<!-- End of Right Panel -->

		<!-- Start of Text Body -->
		<div id='text_body'>
			<div class='text_body_box_declare'>none</div>
			<div class='text_body_box'>
				<div class='text_body_box_date'>none</div><div class='text_body_box_time'>none</div>
				<div class='text_body_box_text'>
					Just a longer sentence to pass and even longer amount of time, that is needed to be passed a this moment.
				</div>
			</div>
		</div>
		<!-- End of Text Body -->

	</div>
</body>

</html>

Here is login_box.js:

if (error == null)
{
document.write ("<div class='right_panel_box'>")
	document.write ("<div class='right_panel_text_lable'>Login</div>")
		document.write ("<form action=''>")
			document.write ("<div class='login_input'><input type='text' name='username' size='15' value='Username' /></div>")
			document.write ("<div class='login_input'><input type='password' name='password' size='15' value='Password' /></div>")
			document.write ("<div class='login_input'><input type='button' name='login' value='Login' onmousedown='login_check(this.value)' /></div>")
		document.write ("</form>")
document.write ("</div>")
}

The idea is that, if someones browser doesn't support AJAX or Javascript, the from will not be displayed. But it's not working; The form just doesn't appear. No errors or anything...

What should I do?

Thanks!

kael.shipman · June 8, 2007

It may be screwing up because error isn't defined. If it's not defined, it doesn't equal null, so the box doesn't display, right? I'm not sure that would do it, but you could try putting "var error = null;" (I usually prefer boolean true and false instead of null vs. (string)"true", but that's just me) in the global scope right above if (problem) { var error = true; }. Make sure to take out the "var" declaration within the "if" statement, though; for some reason, that's caused me trouble before.

bobleny · June 8, 2007

Here, I changed a few things to try and get it to work...

HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript">
		<!--
			//Define HttpRequest
			function GetAJAX()
			{
				var Ajax = "NoAjax";

				try
				{
					//Firefox, Opera 8.0+, Safari
					Ajax = new XMLHttpRequest();
				}
				catch (e)
				{
					//Internet Explorer
					try
					{
						Ajax = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (e)
					{
						Ajax = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}

				return ajax;
			}

			function Problem()
			{
				Error == "No";

				Get = GetAJAX();
				if (Get == "NoAjax")
				{
					Error == "Yes";
				}

				return Error;
			}
		-->
	</script>
	<link href="css.css" rel="stylesheet" type="text/css" />
	<title>Home - Go MAD</title>
</head>
<body>
	<div id="main_body">

		<!-- Start of Header -->
		<div id="header">
			<div id="header_nav">
				<div class='nav_selected'>Home Page</div><a href='index.php?page=base' class='nav_links'>Knowledge Base</a>
			</div>
		</div>
		<!-- End of Header -->

		<!-- Start of Right Panel -->

		<div id="right_panel">
			<div class="right_panel_box">
				<div class="right_panel_text_lable">Related Links</div>
				<div class='right_panel_link'><a href='http://www.google.com' class='right_panel_link'>Google</a></div>
				<div class='right_panel_link'><a href='http://www.yahoo.com' class='right_panel_link'>Yahoo!</a></div>
			</div>

			<script src='login_box.js'></script>	
		</div>
		<!-- End of Right Panel -->

		<!-- Start of Text Body -->
		<div id='text_body'>
			<div class='text_body_box_declare'>none</div>
			<div class='text_body_box'>
				<div class='text_body_box_date'>none</div><div class='text_body_box_time'>none</div>
				<div class='text_body_box_text'>
					Just a longer sentence to pass and even longer amount of time, that is needed to be passed a this moment.
				</div>
			</div>
		</div>
		<!-- End of Text Body -->

	</div>
</body>

</html>

Login_box.js:

var Error = Problem();
if (Error == "No")
{
document.write ("<div class='right_panel_box'>");
	document.write ("<div class='right_panel_text_lable'>Login</div>");
		document.write ("<form action=''>");
			document.write ("<div class='login_input'><input type='text' name='username' size='15' value='Username' /></div>");
			document.write ("<div class='login_input'><input type='password' name='password' size='15' value='Password' /></div>");
			document.write ("<div class='login_input'><input type='button' name='login' value='Login' onmousedown='login_check(this.value)' /></div>");
		document.write ("</form>");
document.write ("</div>");
}

This still doesn't work. It is as though the variables aren't being set.

Any other ideas?

kael.shipman · June 8, 2007

Javascript is case sensitive, so your GetAJAX() function isn't returning anything (you have it set to return "ajax" when you defined "Ajax"). It's always good to have a standard way of writing variables so there's no confusion later on. I suggest the javascript standard "camel notation": thisVariableIsSet. You'll find this in almost all javascript properties/methods anyway, so it would be handy to be in the habit.

Try this

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript">
		<!--
			//Define HttpRequest
			function GetAJAX()
			{
				var ajax = false;
				try
				{
					//Firefox, Opera 8.0+, Safari
					ajax = new XMLHttpRequest();
				}
				catch (e)
				{
					//Internet Explorer
					try
					{
						ajax = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (e)
					{
						ajax = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}

				return ajax;
			}

			function Problem()
			{

				Get = GetAJAX();
				if (!Get)
				{
					return true; //If no ajax, return true: problem exists.
				}

				return false; //Otherwise, return false: No Problem.
			}
		-->
	</script>
	<link href="css.css" rel="stylesheet" type="text/css" />
	<title>Home - Go MAD</title>
</head>
<body>
	<div id="main_body">

		<!-- Start of Header -->
		<div id="header">
			<div id="header_nav">
				<div class='nav_selected'>Home Page</div><a href='index.php?page=base' class='nav_links'>Knowledge Base</a>
			</div>
		</div>
		<!-- End of Header -->

		<!-- Start of Right Panel -->

		<div id="right_panel">
			<div class="right_panel_box">
				<div class="right_panel_text_lable">Related Links</div>
				<div class='right_panel_link'><a href='http://www.google.com' class='right_panel_link'>Google</a></div>
				<div class='right_panel_link'><a href='http://www.yahoo.com' class='right_panel_link'>Yahoo!</a></div>
			</div>

			<script src='login_box.js'></script>	
		</div>
		<!-- End of Right Panel -->

		<!-- Start of Text Body -->
		<div id='text_body'>
			<div class='text_body_box_declare'>none</div>
			<div class='text_body_box'>
				<div class='text_body_box_date'>none</div><div class='text_body_box_time'>none</div>
				<div class='text_body_box_text'>
					Just a longer sentence to pass and even longer amount of time, that is needed to be passed a this moment.
				</div>
			</div>
		</div>
		<!-- End of Text Body -->

	</div>
</body>

</html>

and this

var err = Problem();
if (!err)
{
document.write ("<div class='right_panel_box'>");
	document.write ("<div class='right_panel_text_lable'>Login</div>");
		document.write ("<form action=''>");
			document.write ("<div class='login_input'><input type='text' name='username' size='15' value='Username' /></div>");
			document.write ("<div class='login_input'><input type='password' name='password' size='15' value='Password' /></div>");
			document.write ("<div class='login_input'><input type='button' name='login' value='Login' onmousedown='login_check(this.value)' /></div>");
		document.write ("</form>");
document.write ("</div>");
}

If that doesn't work, then try taking out all the extra code and just running a check on the mechanisms (i.e., use ONLY the if structures and comment out the rest, then put in alerts along the way to show you whats going on and what might be going wrong). Good luck!

bobleny · June 9, 2007

That seems to have worked. I don't understand why what I had didn't work though. The typo was fixed a while ago, I just didn't update my clipboard when I copied it over.

HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript">
		<!--
			//Define HttpRequest
			function GetAJAX()
			{
				var Ajax = "NoAjax";

				try
				{
					//Firefox, Opera 8.0+, Safari
					Ajax = new XMLHttpRequest();
				}
				catch (e)
				{
					//Internet Explorer
					try
					{
						Ajax = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (e)
					{
						Ajax = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}

				return Ajax;
			}

			function Problem()
			{
				Error == "No";

				Get = GetAJAX();
				if (Get == "NoAjax")
				{
					Error == "Yes";
				}

				return Error;
			}
		-->
	</script>
	<link href="css.css" rel="stylesheet" type="text/css" />
	<title>Home - Go MAD</title>
</head>
<body>
	<div id="main_body">

		<!-- Start of Header -->
		<div id="header">
			<div id="header_nav">
				<div class='nav_selected'>Home Page</div><a href='index.php?page=base' class='nav_links'>Knowledge Base</a>
			</div>
		</div>
		<!-- End of Header -->

		<!-- Start of Right Panel -->

		<div id="right_panel">
			<div class="right_panel_box">
				<div class="right_panel_text_lable">Related Links</div>
				<div class='right_panel_link'><a href='http://www.google.com' class='right_panel_link'>Google</a></div>
				<div class='right_panel_link'><a href='http://www.yahoo.com' class='right_panel_link'>Yahoo!</a></div>
			</div>

			<script src='login_box.js'></script>	
		</div>
		<!-- End of Right Panel -->

		<!-- Start of Text Body -->
		<div id='text_body'>
			<div class='text_body_box_declare'>none</div>
			<div class='text_body_box'>
				<div class='text_body_box_date'>none</div><div class='text_body_box_time'>none</div>
				<div class='text_body_box_text'>
					Just a longer sentence to pass and even longer amount of time, that is needed to be passed a this moment.
				</div>
			</div>
		</div>
		<!-- End of Text Body -->

	</div>
</body>

</html>

Login_box.js:

var Error = Problem();
if (Error == "No")
{
document.write ("<div class='right_panel_box'>");
	document.write ("<div class='right_panel_text_lable'>Login</div>");
		document.write ("<form action=''>");
			document.write ("<div class='login_input'><input type='text' name='username' size='15' value='Username' /></div>");
			document.write ("<div class='login_input'><input type='password' name='password' size='15' value='Password' /></div>");
			document.write ("<div class='login_input'><input type='button' name='login' value='Login' onmousedown='login_check(this.value)' /></div>");
		document.write ("</form>");
document.write ("</div>");
}

I need to know why the above doesn't work. If I don't know why it doesn't work, when I think that it should work, then I will be confused.

kael.shipman · June 9, 2007

Hm. I can't see why it wouldn't work. It's doubtful, but it may be something to do with use of strings for comparison. And this sounds stupid, but there have actually been times when I check a variable letter for letter and after an hour of trouble shooting, what finally fixed my problem was copying one variable name and pasting it in place of the others (that should have been the same but apparently weren't). I guess there's just a lot that can go wrong. Anyway, glad it's working, and sorry I can't help any further. However, as a final plea, I think your life would be easier with boolean checkers instead of strings. Strings are subject to caps errors, character errors, etc. Not to mention it's just nice saying "var isValid = true;" instead of 'var isValid = "Yes";', AND it looks cooler.

bobleny · June 9, 2007

When I do PHP I use boolean for just about everything. I certainty don't think it any cooler, but it is far simpler.

Thanks for your help none the less.

Oh, and I have had the same problem as you before. Letter for letter, the variables where exactly the same; copying and pasting worked. I believe the problem to be with the computer, the line isn't updated... I get that a lot in OpenOffice. The lines get mixed up, but if I highlight it all, it corrects its self.

Anyways, thanks again!

Sign In

[SOLVED] Hiding a form with Javascript.

Recommended Posts

bobleny

Link to comment

Share on other sites

kael.shipman

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

kael.shipman

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

kael.shipman

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information