Zymic Webmaster Forums > Login/register Box

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript

jimbobd

Mar 1 2010, 07:04 PM

Hi there, I am trying to create a combined login/register box using tabs to switch between. I have used Javascript to switch the tabs but I just seem to be getting two boxes on top of each other :S Could you please point out where I am going wrong? Thanks. Here is my code:

CODE

      &lt;script language="javascript">if (box == "login") {</script>
      <div class="login"> 
        <p align="center" class="style15">Login</p>
        <form id="form1" name="form1" method="post" action="login.php">
          <label><span class="style11">&nbsp;Username:</span>
          <br />
          &nbsp;
          <input type="text" name="user" id="user" />
          </label>
          <label><span class="style11">&nbsp;Password:</span>
          <br />
          &nbsp;
          <input type="password" name="pass" id="pass" />
          </label>
          <label><br />
          <input type="checkbox" name="remember" id="remember" />
          <span class="style14">remember me</span>          </label>
          <br /><br />
          <div align="center">
            <input type="submit" name="Submit" id="Submit" value="Submit" />
          </div>
        </form>
      </div>
	  &lt;script language="javascript">} else if (box == "register") {</script>
      <div class="login">
      
      </div>
	  &lt;script language="javascript">}</script>
      
      <div id="logintab" onclick="document.getElementById('logintab').style.background-image='url(Images/tab_on.png)';
                                  document.getElementById('registertab').style.background-image='url(Images/tab_off.png)';
                                  var box='login';">
      
      </div>
      <div id="registertab" onclick="document.getElementById('registertab').style.background-image='url(Images/tab_on.png)';
                                     document.getElementById('logintab').style.background-image='url(Images/tab_off.png)';
                                     var box='register';">
      
      </div>

Straystudio

Mar 6 2010, 09:40 PM

You can not merge JavaScript with HTML likewise in PHP outputting HTML
You could do something alike, save this and play editing var Value at the top:

CODE

<html>
<head>

<script language="javascript">

var box = "login";

function switchDIV(){

     if (box == "login") {
       document.getElementById('login').style.display='';
 } else if (box == "register") {
       document.getElementById('register').style.display='';
 }
}
</script>

</head>
<body onload="switchDIV();">

<div id="login" style="display: none;">
 Here the FORM for login
</div>

<div id="register" style="display: none;">
 Here the FORM for register
</div>

</body>
</html>

Andrew

Mar 8 2010, 12:26 AM

I'll also point out instead of < some of your carets are <, I'll assume that happened when you pasted it here, but if it didn't that might also be causing you some issues

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.