hey guys,
I am really new to UI design and I am trying to finish building a simple website to include on my resume. My problem is that I have a login page with a radio button asking the user if they are an existing customer. If they are they would select one of two radio buttons, yes or no. By default I have selected the yes button to be checked. Consequentally, I would only like the user login form to be displayed while hiding the user registration from. And if the user were to select the no radio button I would like to hide the user login form and display the other. This is the code I got so far.
<script src="C:/xampp/htdocs/book_apps/ALEXsWebsite/jquery-1.10.2.js"></script>
<html>
<head>
<title>User Login or Register</title>
<link rel="stylesheet" href="main.css" >
</head>
<body>
<div id="question"><?php echo "Are you a returning cutomer?"?></div>
<ul>
<li><label><input type="radio" name="input" id="existingUser" value="yes" checked="checked">YES</label></li>
<li><label><input type="radio" name="input" id="notExistingUser" value="no">NO</label></li>
</ul>
<div class="registration">
<h1>User Registration</h1>
<form name="userRegistration" action="userHome.php" method="post">
<br />
<label>Full Name:</label>
<input type="input" id="inputName" name="name" />
<br />
<label>Phone Number:</label>
<input type="input" id="inputPhone" name="pNumber" />
<br />
<label>Address:</label>
<input type="input" id="inputAddress" name="address" />
<br />
<label>Email:</label>
<input type="input" id="inputEmail" name="email" />
<br />
<label> </label>
<input type="submit" value="Submit" />
<br />
</form>
</div>
<div class="login">
<h1>User Login</h1>
<form name="userLogin" action="userHome.php" method="post">
<label>Email:</label>
<input type="input" name="emailLogin" />
<br />
<label>Password:</label>
<input type="password" name="password" />
<br />
<label> </label>
<input type="submit" value="Submit" />
<br />
</form>
</div>
</body>
</html>
Like I mentioned, I am a rookie and would appreciate it if you guys keep your solutions easy to understand with minimal code changes. I have been thinking about how to apprach it but I can not seem to put it into code because I don't know javaScript but I have to use it (personal reasons). My pseudocode is something like this:
if the radio button with id="existingUser" is checked, then hide form name="userRegistration"
else hide form name="userLogin".
(Also I know I have to change both form actions to a js function that would perform form validation. But I was wondering how do I get the users to go to userHome.php after that js function is complete? assumming input data is ok )
