...

View Full Version : Preview button to display inputted text into a form



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>

WolfShade
07-10-2012, 06:21 PM
First you need to remove all the <p> tags from within the script.

Second, preview() doesn't actually have any code within it to do anything, so I'm pretty sure that since the form submits to itself that all you are doing is submitting the form and doing nothing with it, which just reloads the page.

DaveyErwin
07-10-2012, 06:50 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.


Well it submits the form
which causes a page refresh
and that clears the form
to prevent this default action
make the button type a button
<button type="button" onclick = .....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum