Copy To Page Form

This snippet will copy text entered into a form field and place it directly on the Web page.

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 9.0b1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

Text will appear just above for the below form.

* The below portion of code can be placed anywhere within the <BODY> section of your document and when you either tab out of the textarea form or click anywhere on the page, the text you placed inside the form will be transposed to that location.

Input text here:

In other words, you can place the text box in one area of the page and the snipplet of above code anywhere else on the page and when you tab out the text will be transposed to that section of the page. Type some text in the above form and see above it will end up.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. If you select to incorporate it into a functional form, you need to have a solid background in HTML, javascripts, forms and reconfigurations. If you do not need to incorporate this effect into a functional form, you can use it as a stand alone script as is without any incorporation. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" to incorporate this into a working form until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections (incorporated into a working form if you select to do so) of your document. It also makes use of an external .js file you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="copyToPage.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

O nce you have completed either of the above steps for the <HEAD> section, all that is left is to either incorporate the <BODY> section of code into a working form or paste it where you want the effect to appear.

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/copytopage.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/copytopage.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

If you are going to have more than one of these on a page, then you will need to rename each one a different name so there is not a conflict. See below where and howto.

<p>Input text here:<br>
<input type="text" name="phone" style="width:160px" id="phone" onchange="copyValue(this);">
<br><br>
When you tab out or click somewhere else on the page, your text will appear below.
<br><br>
Your input: <span id="copy_phone" style="font-weight: bold;"></span>
</p>

<p>Input text here:<br>
<input type="text" name="phone1" style="width:160px" id="phone1" onchange="copyValue(this);">
<br><br>
When you tab out or click somewhere else on the page, your text will appear below.
<br><br>
Your input: <span id="copy_phone1" style="font-weight: bold;"></span>
</p>

As you can notice in the above, there are three (3) places where you need to rename the code.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]