...

View Full Version : Form fields write out to another section on page?



dommy
08-16-2007, 07:32 PM
Hey all,

I've got a page where I have a form that submits a message to a given email address... now I have written out the message that will end up with the receiver so the sender can see what it looks like... what I want to do is present it with gaps filled as the user fills in the form...

i.e.

Form at top of page:
Friends Name:
Friends email:
Your Name:

then below

Hi (Friends Name)
I thought you might like to receive this snippet of info.

Regards (Your Name)

As the user fills in the fields in the form, the bracket section in the message fills in too.

Is this possible - how would I go about doing this?

Thanks

Daemonspyre
08-16-2007, 09:27 PM
Do you want this done during or after form processing?

If you want this done during the form processing (i.e., when the person changes focus from the "Friend's Name" form field to the "Friend's email" form field), then you need to use client-side coding, like JavaScript.

After form processing, just use the request.form() collection.

So, after the user hits SUBMIT


Hi <%= request.form("FriendsName") %>,
I thought you might like to receive this snippet of info.

Regards <%= request.form("YourName") %>

dommy
08-17-2007, 12:01 AM
Hi Daemonspyre - Yeah I want it realtime before any form submission. So I guess javascript is the way forward - any links or suggestions would be much appreciated.

I think this is the right direction
http://www.webdeveloper.com/forum/showthread.php?t=153046

BUT it only works on onchange - so it doesn't fill the last field in if there isn't another to change to.

Daemonspyre
08-17-2007, 12:24 AM
Although this isn't the correct forum, here's how you do it. You will need to correct it based on your form fields.


<html>
<body>
<script language="javascript">
function setField(fld,dest) {
var theForm = eval('document.myForm.'+fld);
if (fld != "") {
document.getElementById(fld).innerHTML = theForm.value;
}
}
</script>

<form method="post" action="test.asp" name="myForm">
Your Name: <input type="text" name="YourName" size="20" onblur="javascript:setField('YourName','YourName');" /><br />
Friend's Name: <input type="text" name="FriendName" size="20" onblur="javascript:setField('FriendName','FriendName');" /><br />
Friend's Email: <input type="text" name="FriendEmail" onblur="javascript:setField('FriendEmail','FriendEmail');" /><br />
<input type="button" name="B1" value="Submit" />
</form>
<p>&nbsp;</p>
<div id="previewMessage">
Hi <span id="FriendName" style="margin: 0px; padding: 0px;"></span><br />
I thought you might like to receive this snippet of info.<br />
<br />
Regards <span id="YourName" style="margin: 0px; padding: 0px;"></span><br />
Sent to: mailto:<span id="FriendEmail" style="margin: 0px; padding: 0px;"></span>
</div>
</body>
</html>

dommy
08-17-2007, 01:13 AM
Yeah - thought this would be server side asp code... but hey ho.

Did u try this cos i get a js error?

Doesn't seem to like the following line..
document.getElementById(fld).innerHTML = theForm.value;

Daemonspyre
08-17-2007, 03:01 AM
Works just fine on my servers.

What error are you getting (are you using FF or IE)? I only tried it on FF, so it may need some IE hacking.

miranda
08-17-2007, 05:29 AM
IE doesn't like eval it prefers that you use window.eval

dommy
08-17-2007, 11:23 AM
I tried it in IE.

I ended up using that link example and changing the onchnage to onkeyup so that it wrote the letters as I typed them..

Here's the code..

[CODE]
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function copyValue(el) {
document.getElementById('copy_' + el.id).innerHTML = el.value;
}
//-->
</SCRIPT>

<body>
<form action="bla.php" id="formulier" name="formulier"method="post">
phone:
<input type="text" name="phone" style="width:160px" id="phone" onkeyup="copyValue(this);" />
phone:
<input type="text" name="tel" style="width:160px" id="tel" onkeyup="copyValue(this);" />
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Another location: <span id="copy_phone"></span></p>
<p>Another location 2: <span id="copy_tel"></span></p>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum