how to insert user text input into the page
<p>I need to make a web page that will accept user input, and when submitted insert that input into the webpage.</p>

<p>I have some code that collects user input but I don't know how to change it so that the existing page is also output. I don't think I have explained that very well. </p>

<p>I have an existing page with headings and picture place holders that I want users to be able to add text and images to without knowing any programming. So need to insert text areas and image uploads that when submitted form the content of the page.</p>

<p>I suspect it will be some javascript that I need but I am lost, everything I try overwrites the existing page, can someone point me in the right direction. </p>

<pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" &gt;
&lt;html lang="'en'"&gt;
&lt;head&gt;
&lt;meta http-equiv="'Content-type'" content="'text/html;charset=UTF-8'"&gt;
&lt;title&gt;TOTM script collection Template&lt;/title&gt;
&lt;script type="text/javascript"&gt;

function getcode() {
var item_name = document.form.item.value;
var item_ship = document.form.ship.value;
var item_pay = document.form.pay.value;
var description = document.form.description.value;

var template = "&lt;!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'\n"+
"'http://www.w3.org/TR/html4/loose.dtd? &gt;\n"+
"&lt;html lang='en'&gt;\n"+
"&lt;head&gt;\n"+
"&lt;meta http-equiv='Content-type' content='text/html;charset=UTF-8'&gt;\n"+
"&lt;title&gt;" + item_name + "&lt;\/title&gt;\n"+
"&lt;\/head&gt;\n"+
"&lt;body&gt;\n"+
"&lt;p&gt;\n"+
"&lt;table border=1 cellspacing=0 borderColor=#000000 cellPadding=3 width=1535 align=center&gt;\n"+

  "&lt;tr&gt;\n"+
    "&lt;td&gt;\n"+
    "&lt;p&gt;\n"+
"&lt;table border=1 cellspacing=0 borderColor=#000000 cellPadding=3 width=1535 align=center&gt;\n"+

  "&lt;tr&gt;\n"+
    "&lt;td&gt;\n"+
      "&lt;p align='center'&gt;" + item_name + "&lt;\/p&gt;\n"+
      "&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/p&gt;\n"+
      "&lt;p&gt;" + item_pay + "&lt;\/p&gt;\n"+
      "&lt;p&gt;" + item_ship + "&lt;\/p&gt;\n"+
      "&lt;p&gt;" + description + "&lt;\/p&gt;\n"+
          "&lt;\/td&gt; &lt;\/tr&gt; &lt;\/table&gt; &lt;\/td&gt; &lt;\/tr&gt; &lt;\/table&gt; &lt;\/p&gt;\n"+
"&lt;\/body&gt;\n"+
"&lt;\/html&gt;";
document.getElementById( 'item-text' ).innerHTML = template;

/* DISPLAYS CODE FOR COPY/PASTE */

template = template.replace(/&amp;/g,"&amp;amp;");
template = template.replace(/&lt;\\\//g,"&amp;lt;/");
var ltRegExp = new RegExp('&lt;','g'); // required to prevent html invalid character sequence
template = template.replace(ltRegExp,"&amp;lt;");
template = template.replace(/&gt;/g,"&amp;gt;");
template = "&lt;code&gt;&lt;pre&gt;" + template + "&lt;\/pre&gt;&lt;\/code&gt;";
document.getElementById( 'item-code' ).innerHTML = template;
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
div#item-text {border:solid 1px black; margin-top:1em; padding:1em;}
div#item-code {background-color: #dddddd; border:solid 5px red; margin-top:1em; padding:1em;}
&lt;/style&gt;
&lt;/head&gt;



&lt;body&gt;
&lt;h1&gt;TOTM script collection template&lt;/h1&gt;
&lt;form action="javascript:return false;" name="form"&gt;
&lt;label&gt;&lt;strong&gt;&lt;font size="5" color="#408080"&gt;User Details&lt;/font&gt;&lt;/strong&gt;: &lt;textarea rows="1" cols="96" name="item"&gt;&lt;/textarea&gt; &lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;label&gt;&lt;strong&gt;&lt;font size="5" color="#408080"&gt;1. Introduction&lt;/font&gt;&lt;/strong&gt; : &lt;textarea rows="10" cols="200" name="pay"&gt;&lt;/textarea&gt; &lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;label&gt;&lt;font
size=5 color=#408080&gt;&lt;strong&gt;2. System Details&lt;/strong&gt;&lt;/font&gt; : &lt;textarea rows="10" cols="200" name="ship"&gt;&lt;/textarea&gt; &lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;label&gt;&lt;strong&gt;&lt;font size="5" color="#408080"&gt;3. Lighting&lt;/font&gt;&lt;/strong&gt;: &lt;textarea rows="15" cols="200" name="description"&gt;&lt;/textarea&gt; &lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;input type="submit" value="Preview and GET CODE!" onclick="getcode(); return false;"&gt;
&lt;/form&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;font color="#0080ff" size="5"&gt;Preview
Window:&lt;/font&gt;&lt;/strong&gt; &lt;/p&gt;
&lt;div id="item-text"&gt;&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;font color="#0080ff" size="5"&gt;HTML CODE (Copy and Paste&amp;nbsp;EVERYTHING inside of this
window!)&lt;/font&gt;&lt;/strong&gt;&amp;nbsp; &lt;/p&gt;
&lt;div id="item-code"&gt;&lt;font color="#333333"&gt;&amp;nbsp;&lt;/div&gt;&lt;/font&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
