Sooooo Stumped :s

[MrFish]

I've been working on this same script for almost 2 hours. I cannot figure out the problem in my script. Here it is-

<script type="text/javascript">function loginclick() //this will return to it's original login state.{loginbutton.innerHTML="<div class=\"padding\"></div><input type=\"submit\" width=\"100\" name=\"submit\" value=\"Login\">"; //Login buttonloginforms.innerHTML="<input type=\"text\" width=\"100\" name=\"username\" value=\"Username\"><br /><div class=\"padding\"></div><input type=\"password\" width=\"100\" name=\"password\" value=\"password\"><br />"; //Username and password text fieldsloginboxbottom.innerHTML="<div id=\"padding\"></div><a onclick=\"signupclick()\">Sign Up!</a>";//"Sign Up!" clickable text.}function signupclick() //Extra forms will be added and a register button{loginbuttons.innerHTML="<input type=\"submit\" width=\"100\" id=\"register\" name=\"register\" value=\"Register\">";//Register submit buttonloginforms.innerHTML="<input type=\"text\" width=\"100\" name=\"username\" value=\"Username\"><br /><div class=\"padding\"></div><input type=\"password\ width=\"100\ name=\"password\" value=\"password\"><div class\"padding\"></div><input type=\"text\" name=\"email\" value=\"Email\"><br />"; //Username, password, and email text fieldsloginboxbottom.innerHTML="<a onclick=\"loginclick()\">Login instead.</a>": //"Login instead." Clickable text }</script><!--Just a simple login script. The working php half is on another page. I want to be able to login and register without having to navigate away from the main page --><form method="post" action="<?php $_SERVER['PHP_SELF'];?>"><div id="loginforms"><input type="text" width="100" name="username" value="Username"><br /><div class="padding"></div><input type="password" width="100" name="password" value="password"><br /></div><div id="loginbuttons"><div class="padding"></div><input type="submit" width="100" name="submit" value="Login"></div><div id="loginboxbottom"><div class="padding"></div><a onclick="signupclick()">Sign up.</a> <!-- not really a link. When you click it the login box will expand and an email form will apear. In addition, the submit form will dissapear and a new one named "register" will appear (having completely different action on the php side. You get it?)--></div></form><!-- End of the form -->

I also put an alert in the signupclick() function but it never showed up. Can someone tell my what's the problem?

[Guest FirefoxRocks]

If you want to perform PHP actions without navigating away from the page, you should try looking into AJAX.

[sckewi]

In your signupclick function it seems you have a colon where you need a semi colon in the last line, that might be the reason for your problem.You are indeed going to need to learn AJAX if you want to login without leaving the page. There's a great tutorial on this on W3Schools: http://w3schools.com/ajax/default.aspThe following is just some general ideas you might consider but isn't in relation to your actual question:Think about avoiding innerHTML by putting the HTML in the web-page and setting it's display attribute to hidden with CSS, then have your JavaScript set it back to block or inline when that bit needs to be shown. If you insist on innerHTML, it might be easier to use single quotes instead of double quotes for the HTML string, for example:function loginclick() //this will return to it's original login state.{ loginbutton.innerHTML="<div class=\"padding\"></div><input type=\"submit\" width=\"100\" name=\"submit\" value=\"Login\">"; //Login button loginforms.innerHTML="<input type=\"text\" width=\"100\" name=\"username\" value=\"Username\"><br /><div class=\"padding\"></div><input type=\"password\" width=\"100\" name=\"password\" value=\"password\"><br />"; //Username and password text fields loginboxbottom.innerHTML="<div id=\"padding\"></div><a onclick=\"signupclick()\">Sign Up!</a>";//"Sign Up!" clickable text.}Becomes:function loginclick() //this will return to it's original login state.{ loginbutton.innerHTML='<div class="padding"></div><input type="submit" width="100" name="submit" value="Login">'; //Login button loginforms.innerHTML='<input type="text" width="100" name="username" value="Username"><br /><div class="padding"></div><input type="password" width="100" name="password" value="password"><br />'; //Username and password text fields loginboxbottom.innerHTML='<div id="padding"></div><a onclick="signupclick()">Sign Up!</a>';//"Sign Up!" clickable text.}Also are you using HTML or xHTML?If xHTML, input tags are self closing tags and should be closed in the same way you've closed the breaks, or by putting an </input> after them. You should also drop the name attribute and use ID instead.Hope this helps.

[Ingolme]

You should also drop the name attribute and use ID instead.

The name attribute is necessary in form elements, because IDs can only be used once in a page. Consider this example:

<label for="option1"><input type="radio" name="options" id="options1"> Option 1</label><label for="options2"><input type="radio" name="options" id="options2"> Option 2</label><label for="options3"><input type="radio" name="options" id="options3"> Option 3</label><label for="options4"><input type="radio" name="options" id="options4"> Option 4</label><label for="options5"><input type="radio" name="options" id="options5"> Option 5</label><label for="options6"><input type="radio" name="options" id="options6"> Option 6</label>

When developers say not to use the name attribute they're referring to using it on elements that aren't form inputs or iframes.

[sckewi]

I never thought of that, cheers for pointing it out.