asadali
07-10-2012, 06:13 PM
I am having problems with my code. What I am trying to achieve is that click the Preview button it should display the values that the user has entered below the form. What's happening instead is that when I click the Preview it clears the form instead.
(I have included the whole HTML code so you can paste it into a text editor and view the form in web browser.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style type="text/css" media="screen">
form div {
margin-bottom: 1em;
}
div.submit input {
margin-left: 165px;
}
label.field {
display: block;
float: left;
margin:-right: 15px;
width: 150px;
text-align: right;
}
input[type="text"], select, textarea {
width: 300px;
font: 18px Verdana;
border: solid 2px #666;
background-color: #ada;
}
div.required label.field {
font-weight: bold;
}
div.required input, div.required select {
background-color: #6a6;
border: solid 2px #000;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out the form below to register for our site. Fields
with bold labels are required.</p>
<p><script language="JavaScript">
function checkform(thisform) {
var errors = [];
var errorMessage = "Please correct the following errors:\n\n";
if (!thisform.name.value) {
errors.push("You must enter a name.");
}
var selected = false;
for (var i = 0; i < thisform.gender.length; i++) {
if (thisform.gender[i].checked) {
selected = true;
}
}
if (!selected) {
errors.push("You must choose a gender.");
}
if (errors.length > 0) {
for (var i = 0; i < errors.length; i++) {
errorMessage += errors[i] + "\n";
}
alert(errorMessage);
return false;
}
else {
return true;
}
}
</p>
<p> function preview() {
<p>name</p>
<p>Gender: "gender"</p>
<p>Operating System: "os"</p>
<p>Toys: "toy"</p>
}
</script></p>
<form method="post" onsubmit="return checkform(this)" enctype="multipart/form-data">
<div class="required">
<label class="required field" for="name">Name</label>
<input name="name" />
</div>
<div class="required">
<label class="required field">Gender</label>
<label><input type="radio" name="gender" value="male" />
male</label>
<label><input type="radio" name="gender" value="female" />
female</label>
</div>
<div class="required">
<label class="required field">Operating System</label>
<select name="os">
<option value="windows">Windows</option>
<option value="macos">Mac OS</option>
<option value="linux">Linux</option>
<option value="other">Other...</option>
</select>
</div>
<div>
<label class="field">Toys</label>
<label><input type="checkbox" name="toy" value="digicam" />
Digital Camera</label>
<label><input type="checkbox" name="toy" value="mp3" />
MP3 Player</label>
<label><input type="checkbox" name="toy" value="wlan" />
Wireless LAN</label>
</div>
<div>
<label class="field">Portrait</label>
<input type="file" name="portrait" />
</div>
<div>
<label class="field">Mini Biography</label>
<textarea name="bio" rows="6" cols="40"></textarea>
</div>
<div class="submit">
<input type="submit" value="register" />
</div>
<div class="preview">
<button onclick=preview()><b><i>Preview</b></i></button>
</div>
</form>
</body>
</html>
(I have included the whole HTML code so you can paste it into a text editor and view the form in web browser.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style type="text/css" media="screen">
form div {
margin-bottom: 1em;
}
div.submit input {
margin-left: 165px;
}
label.field {
display: block;
float: left;
margin:-right: 15px;
width: 150px;
text-align: right;
}
input[type="text"], select, textarea {
width: 300px;
font: 18px Verdana;
border: solid 2px #666;
background-color: #ada;
}
div.required label.field {
font-weight: bold;
}
div.required input, div.required select {
background-color: #6a6;
border: solid 2px #000;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out the form below to register for our site. Fields
with bold labels are required.</p>
<p><script language="JavaScript">
function checkform(thisform) {
var errors = [];
var errorMessage = "Please correct the following errors:\n\n";
if (!thisform.name.value) {
errors.push("You must enter a name.");
}
var selected = false;
for (var i = 0; i < thisform.gender.length; i++) {
if (thisform.gender[i].checked) {
selected = true;
}
}
if (!selected) {
errors.push("You must choose a gender.");
}
if (errors.length > 0) {
for (var i = 0; i < errors.length; i++) {
errorMessage += errors[i] + "\n";
}
alert(errorMessage);
return false;
}
else {
return true;
}
}
</p>
<p> function preview() {
<p>name</p>
<p>Gender: "gender"</p>
<p>Operating System: "os"</p>
<p>Toys: "toy"</p>
}
</script></p>
<form method="post" onsubmit="return checkform(this)" enctype="multipart/form-data">
<div class="required">
<label class="required field" for="name">Name</label>
<input name="name" />
</div>
<div class="required">
<label class="required field">Gender</label>
<label><input type="radio" name="gender" value="male" />
male</label>
<label><input type="radio" name="gender" value="female" />
female</label>
</div>
<div class="required">
<label class="required field">Operating System</label>
<select name="os">
<option value="windows">Windows</option>
<option value="macos">Mac OS</option>
<option value="linux">Linux</option>
<option value="other">Other...</option>
</select>
</div>
<div>
<label class="field">Toys</label>
<label><input type="checkbox" name="toy" value="digicam" />
Digital Camera</label>
<label><input type="checkbox" name="toy" value="mp3" />
MP3 Player</label>
<label><input type="checkbox" name="toy" value="wlan" />
Wireless LAN</label>
</div>
<div>
<label class="field">Portrait</label>
<input type="file" name="portrait" />
</div>
<div>
<label class="field">Mini Biography</label>
<textarea name="bio" rows="6" cols="40"></textarea>
</div>
<div class="submit">
<input type="submit" value="register" />
</div>
<div class="preview">
<button onclick=preview()><b><i>Preview</b></i></button>
</div>
</form>
</body>
</html>