Instant Preview Script Multiple not single? - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Instant Preview Script Multiple not single?

howto change single JS to multiple

davidanders

7:46 pm on Jan 10, 2004 (gmt 0)

10+ Year Member

Either of these scripts will display the text entered into an Input field at another location, size, and format.
How would you modify the code to allow three or ten fields to be used, not just one?
=======================
EXAMPLE ONE
<html>
<head>
<script language="JavaScript">
function fieldPreview( evt ) {
formName01 = document.form01.inpName;
formName02 = document.form02.inpName;
formName01.value = formName02.value;
with ( document.all ) {
spanName.innerText = formName02.value;
}
}
</script>
</head>
<body>
<p>
NAME: <span id=spanName></span><br>
<br>
<form name=form01 method=GET>
<input type=hidden name=inpName value="">
</form>
<br>
<form name=form02>
<input type=text id=inpName size=20 value=""
name=inpName onKeyUp="fieldPreview( event )">
</form>
<br>
<br>

</body>
</html>
======================
EXAMPLE TWO

<script type="text/javascript" LANGUAGE="Javascript">

</script>

To display the Live Preview enter:
<span id="TextDisplay"></span>

Inside the input text tag for your field, add these two attributes:
id="DynamicText" onKeyUp="ReloadTextDiv();"
(your tag may look something like this:
<input type="text" name="email" Value="email" size="20" maxlength="40" id="DynamicText" onKeyUp="ReloadTextDiv();">

Thank you for your time.

Purple Martin

6:32 am on Jan 13, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

======================
EXAMPLE TWO - MODIFIED

<script type="text/javascript" LANGUAGE="Javascript">

</script>

To display the Live Preview enter:
<span id="TextDisplay1"></span>
<span id="TextDisplay2"></span>
<span id="TextDisplay3"></span>

Inside the input text tag for your fields, add these two attributes:
id="DynamicText1" onKeyUp="ReloadTextDiv('DynamicText1','TextDisplay1');"
(your tags may look something like this:
<input type="text" name="email" Value="email" size="20" maxlength="40" id="DynamicText1" onKeyUp="ReloadTextDiv('DynamicText1','TextDisplay1');">
<input type="text" name="name" Value="name" size="20" maxlength="40" id="DynamicText2" onKeyUp="ReloadTextDiv('DynamicText2','TextDisplay2');">
<input type="text" name="postcode" Value="postcode" size="20" maxlength="40" id="DynamicText3" onKeyUp="ReloadTextDiv('DynamicText3','TextDisplay3');">

How it works: The onKeyUp event for each field passes two arguments to the ReloadTextDiv function: the first is the id of the text field, the second is the id of the span to be updated. The function uses these arguments to get the value of the correct text field and put it in the correct span. There are other (probably better) ways to do this but this quick modification should do you for now!