I’m creating a website page which has to different forms, depending on user input a different form is loaded.
When the page is loaded, The user is asked if they would like to register has a customer or a seller. depending on that choice I would the variable set to True or False a relevant form is loaded, so far I managed to get this much done but the page is only loading the background colour only nothing else(This started occurring when I started introduce JavaScript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Customer/Reseller</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
</head>
<body>
<div class="section" id="page"> <!-- Defining the #page section with the section tag -->
<div class="header"> <!-- Defining the header section of the page with the appropriate tag -->
<h2>G51 Villain Supply</h2>
<h3>Delivering Technology </h3>
<div class="nav clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="index.html"> Home </a></li>
<li><a href="about.html"> About </a></li>
<li><a href="products.html"> Products </a></li>
<li><a href="app.html"> Customer/Reseller </a></li>
<li><a href="private.html"> Private </a></li>
</ul>
</div>
</div>
<div class="section" id="articles"> <!-- A new section with the articles -->
<!--start -->
<div class="line"></div> <!-- Dividing line -->
<div class="article" > <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Seller Section</h2>
<div class="line"></div>
<div class="articleBody clear">
<form action="" method="seller">
<fieldset>
<legend>Seller Registration Form</legend>
<br>Please complete </br>
<br><label for="Fname">First Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="Lname">Last Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="Contact">Contact Number:</label></br> <input type="text" name="name" id="name"/>
<br><label for="email">Email:</label></br> <input type="text" name="email" id="email" />
<p></p><p></p>
<p><label for="agree"> </label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.</p>
<p><label for="btnsubmit"> </label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /></p>
<p></p>
</fieldset>
</form>
</div>
</div>
<!-- end -->
</div>
<div class="section" id="articles"> <!-- A new section with the articles -->
<!--start -->
<div class="line"></div> <!-- Dividing line -->
<div class="article" > <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Customers Section</h2>
<div class="line"></div>
<div class="articleBody clear">
<form action="" method="cust">
<fieldset>
<legend>Customer Registration Form</legend>
<br>Please complete </br>
<br><label for="Fname">First Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="Lname">Last Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="FAdd">First Line Address:</label></br> <input type="text" name="1stAdd" id="name"/>
<br><label for="PstAdd">Postcode:</label></br> <input type="text" name="PstAdd" id="name"/>
<br><label for="Contact">Contact Number:</label></br> <input type="text" name="name" id="name"/>
<br><label for="email">Email:</label></br> <input type="text" name="email" id="email" />
<p></p><p></p>
<p><label for="agree"> </label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.</p>
<p><label for="btnsubmit"> </label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /></p>
<p></p>
</fieldset>
</form>
</div>
</div>
<!-- end -->
</div>
<div class="footer"> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2012 - G51 Villain Supply </p> <!-- Change the copyright notice -->
<a href="#" class="up">Go UP</a>
</div>
</div> <!-- Closing the #page section -->
</body>
some blocks of the JavaScript is uncompleted since I don’t know how. please help, Thank you.
Edit:I replaced the above code with clean working one with out JavaScript.
Try this one, it’s working (tidied up and fixed) :
The JavaScript doing the trick :
What else…?
Well, I just wrapped each section in a separate
div: the customer section incustomerzand the seller section insellerzHave fun! 😉