PDA

Click to See Complete Forum and Search --> : Displaying form values before submitting...

sparky-nyc
04-10-2003, 11:16 AM
How do I print/display/show form DOM values so the user can review them before he/she submits the form? I'd like to do this using only Javascript and keeping it on the client-side.

For example:


...
<form name="userinfo">
First name: <INPUT TYPE="TEXT" NAME="firstname"><br>
Last name: <INPUT TYPE="TEXT" NAME="lastname"><br>

<INPUT TYPE="button" value="review" onclick="loadform('reviewinfo');"><br>
</form>

<form name="reviewinfo">
This is what you entered:
First name: (??? print document.userinfo.firstname.value ???)<br>
Last name: (??? print document.userinfo.lastname.value ???)<br>

Go back to make changes, or click on the button belowe to submit.

<INPUT TYPE="button" value="submit" onclick="validade('reviewinfo');"><br>
</form>
...
Jona
04-10-2003, 02:46 PM
Okay...

<html><head>
<script>
function preview(){document.name_email.Name.value=document.form1.txt1.value;document.name_email.email.value=d ocument.form1.txt2.value;}
</script>
</head><body>
<form name="form1">
<input type=text name="txt1"><br>
<input type=text name="txt2"><br>
<input type=button value="Preview text" onClick="preview()">
</form><br>
<form name="name_email" action="submit.php" method="POST">
Name: <input type=text name="Name"><br>
Email: <input type=text name="email"><br>
<input type=submit value="Submit">
</form></body></html>
sparky-nyc
04-10-2003, 04:38 PM
Thank you Jona! That worked out great.

What's the best way to make the text readonly and to make its appearence look like it was plain html text (as opposed to an input field)?
Jona
04-10-2003, 05:02 PM
In that case, you can use innerText and/or document.write(). Does the script need to work in Netscape?

This works in IE:

<html><head>
<script>
function preview(){txt1.innerText=document.name_email.Name.value;txt2.innerText=document.name_email.email.val ue;}
</script>
</head><body>
<form name="name_email" action="submit.php" method="POST">
Name: <input type=text name="Name"><br>
Email: <input type=text name="email"><br>
<input type=submit value="Submit">
</form><br>
<input type=button value="Preview text" onClick="preview()">
<div id="txt1"></div><br>
<div id="txt2"></div><br>
</body></html>
sparky-nyc
04-10-2003, 10:06 PM
Yes, I'd like this to work in IE, NN and as many other browsers as possible. What are my options?
Jona
04-10-2003, 10:23 PM
:)
pyro
04-10-2003, 10:30 PM
Originally posted by sparky-nyc
Yes, I'd like this to work in IE, NN and as many other browsers as possible. What are my options? Swap out the innerText for innerHTML. This will make it work cross browser...
Jona
04-10-2003, 11:07 PM
To make it work in NN4, use this:

<html><head>
<script>
function preview(){
var b = navigator.appName;
var bv = parseInt(navigator.appVersion);
if(b=="Netscape" && bv==4){
document.txt1.document.open();
document.txt1.document.writeln(document.name_email.Name.value);
document.txt1.document.close();
document.txt2.document.open();
document.txt2.document.write(document.name_email.email.value);
document.txt2.document.close();}
if((b=="Microsoft Internet Explorer") || (b=="Netscape" && bv>=6)){
txt1.innerHTML=document.name_email.Name.value;
txt2.innerHTML=document.name_email.email.value;
}
</script>
</head><body>
<form name="name_email" action="submit.php" method="POST">
Name: <input type=text name="Name"><br>
Email: <input type=text name="email"><br>
<input type=submit value="Submit">
</form><br>
<input type=button value="Preview text" onClick="preview()">
<layer name="txt1"><div id="txt1"></div></layer><br>
<layer name="txt2"><div id="txt2"></div></layer><br>
</body></html>

Pyro, I didn't know that NN (obviously 6+) supports innerHTML. Does 5?
pyro
04-10-2003, 11:12 PM
I don't have NN 5, so I don't know...
Jona
04-11-2003, 12:01 AM
Well, I have IE 4, 5, 6, and NN 4, 6, and 7 (and Gecko). But I don't have 5! :( Oh well, I guess (more like hope) most people don't have 5 either.