Hello Tara,
There are many ways to show this preview. You can use a javascript alert message box, you could set the content of a hidden div or a div that is set as an overlay for the form, you can pass the variables to a server-side language like PHP or ASP... the choice is really yours.
Below I have given you an example of the alert message box example. We created a preview button which calls a javascript function called "preview" and gets a reference to the form we labeled as "myform" (notice the name in the form tag). Using the form name and the names you gave each of the form elements, we fetch out the values and add them to a string called "previewmsg" which at the end we show in an alert.
Now take under advisement that we haven't checked if anything exists in these fields, so if you leave them empty all you will get is the textarea default message and your radio buttons. So make sure you check if they exist first just so it looks nicer to the user.
CODE
<html>
<head>
<title>myForm</title>
<link rel="stylesheet" type ="text/css" href="SillyScience.css"\>
<script language="JavaScript">
function submitform()
{
document.myform.submit();
}
function checkEmail(myForm)
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
{
return (true);
}
alert("Invalid E-mail Address! Please re-enter in the following format: mail@mail.com");
return (false);
}
// Shows us a preview alert message box
function preview() {
// Get reference to form
var form = document.myform;
// Start our preview message
var previewmsg = "These are your fields:\n\n";
// Add each value of the form using their name and add it to our message
previewmsg += form.name.value + "\n";
previewmsg += form.emailAddr.value + "\n";
previewmsg += form.feedback.value + "\n";
//For each radio button if it is checked get the value and break.
for (var i = 0; i < form.prep.length; i++){
if (form.prep[i].checked){
previewmsg += form.prep[i].value;
break;
}
}
// Show the preview message.
alert(previewmsg);
}
</script>
</head>
<body>
<h2><font size="5">Comments and Suggestions</font></h2><br>
<fieldset><legend>Personal Information</legend>
</br>
<p><i>A valid E-mail Address must be submitted if the user wishes to receive updates</i>
<form name="myform" onSubmit="return checkEmail(this)">
Name:<input name="name" type="text" size="15">
<font size= "4">Email Address:
<input type="text" name="emailAddr">
<p>
<br>
<textarea name="feedback" rows="18" cols="60">
Please enter your comments here....
</textarea>
<br>
<blockquote>Rate this Site:
<p>
<input type="radio" name="prep" value="excellent" checked>
Excellent<br>
<input type="radio" name="prep" value="very good">
Good<br>
<input type="radio" name="prep" value="neutral">
Average<br>
<input type="radio" name="prep" value="poor" >
poor<br>
<input type="radio" name="prep" value="very poor" >
very poor
</p>
</blockquote><br>
<input type="submit" value="Submit">
<input type="button" value="Preview" onclick="preview()"/>
<input type="reset" value="Reset">
</form>
</body>
</html>
I hope you find this as a solution to what you were asking about. Enjoy!
"At DIC we be alert message previewing code ninjas... also preview our new movie titled 'Martyr2 escapes from DLL Hell' coming to theaters this November!"
26 Apr, 2008 - 02:12 PM
Will let you know how it goes-much appreciated!!!
| 