I have two forms on a single html page A login form and a Register form
I want to be able to toggle between the forms when i click on the coressponding "span" button
The page should load with just the login form showing but both the login and register "span" buttons at the top
When i click login i want the login form to "hide" and the register form to be shown and vice versa.
here is the code i have so far:
<!DOCTYPE html>
<head>
<title>Login Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<span href="#" class="btn btn-default" id="toggle-register">Register</span>
<div id="loginForm">
<form id='login' action='' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Log In</legend>
<p><input type="text" name="login" value="" placeholder="studentID"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</fieldset>
</form>
</div>
<div id="registerForm">
<form id='register' action='' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Register</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<p><label for='username' >UserName*:</label> <input type='text' name='username' id='username' maxlength="50" /></p>
<p><label for='name'>First Name*: </label> <input type='text' name='name' id='firstName' maxlength="50" /></p>
<p><label for='name'>Second Name*: </label> <input type='text' name='name' id='secondNname' maxlength="50" /></p>
<p><label for='email' >Email Address*:</label> <input type='text' name='email' id='email' maxlength="50" /></p>
<p><label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /></p>
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
</div>
<script>
</script>
</body>
</html>
Thanks!
