How can I output multiple text fields to one page

Question

My job requres the use of a lot of templates to be used for submitting information to other departments. To avoid having 6 different templates to go off of, I wanted to create a unified simple html document that would allow me to type in simple text fields where information is needed then output that information to another field either on the same page or open a new page completely.

For example:

<SPAN ID="copytext">
<b>**TOC Template**</b>
<br />
<br />
TOC,
<br />
<br />
Subscribers Impacted: <input type="text" id="text1" placeholder="How many"><br>
Business Name(s): <input type="text" id="text2" placeholder="Name of the business"><br>
Site ID: <input type="text" id="text3" placeholder="Site ID from Granite"><br>
</span>

<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="myFunction(); ClipBoard();">Copy to Clipboard</BUTTON> 
<script>
function myFunction() {
    document.getElementById("firstName").select();
}
</script>

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

</SCRIPT>

I want to be able to click the button and just have it output or copy all of the information on the page including what is inside the text fields so that I can just paste it in our ticketing system. Any help would be greatly appreciated! If I can get it to copy that would be the easiest, but if I need to output it on to a separate on the same page, that would work too.

EDIT

Here is what I was looking for:

Subscribers Impacted: <input type="text" id="text1" placeholder="How many">        <br>
Business Name(s): <input type="text" id="text2" placeholder="Name of the         business"><br>
Site ID: <input type="text" id="text3" placeholder="Site ID from Granite"><br>

*These would have the text fields beside them. Once I fill them in, I wanted to output all of the fields to another page that would have everything filled in to where I could just copy it all.

It would look like this:

Subscribers Impacted: One
Business Name: Mcdonalds
Site ID: GXQ9715

What I have currently is a web page with a few DIVs on it and when I click the link to a template, it loads the html page with the template. I just want to be able to fill it out, hit submit then have it output to another page without the text fields.

Answer 1

You need to use JavaScript with html. Here is an example

    <script>
        $(function () {
        $("#NameField").change(function () {
                        document.getElementById("NameBox").value = $("#NameField").val();

                    });
                    $("#NameField").keyup(function () {
                    document.getElementById("TheWord").value = $("#NameField").val().toUpperCase();});
        });
        </script>


    <input type="text" class="CustomWord" id="NameField" onkeydown="return alphaOnly(event);" name="NameField" value="Write Here" onfocus="if (this.value == 'Write Here') this.value = '';" onblur="    if (this.value == '') this.value = 'Write Here';"> 

<label for="TheWord">Word: </label><input readonly="readonly" id="TheWord" /><br />

Basically, create your textfields and give each one an ID and then use JavaScript to do things if any of these textfields changes. Something like, if textbox1 with ID blahText1 change, copy the string to lable1 or copy the text to hidden field.