How to copy an entire form to clipboard?

@LostCodeJan 02.2007

As my title suggests I am trying to figure out how to copy the contents of an entire form to clipboard. I have been able to locate code that allows me to copy single textareas/fields, but I need to be able to copy Labels, textarea/fields as a whole and keep their basic format (not font settings, or any of that, but things like table locations and such).

I am trying to create a “template” which will then be exported to a ticketing program. I want to see if I can at least get the sopy to clipboard to work for the whole thing first, then if I can at least get that I want to have it automatically post it to another programs like Service Center.

Any help would be greatly appreciated on this, I am about at my witts end since I have been trying to tweak code to get this to work for almost 2 weeks! 😮

to post a comment

JavaScript

27 Comments(s) _↴

@ricpJan 02.2007 — #Several things here..

1) The clipboard object is only accessible from within IE (WinIE at that).

2) In JS the clipboard object will hold either plain text or a URL string.

What sort of input is your ticketing program going to expect? The simplest method of passing form data is the way it's done now, with key/value pairs with an ampersand delimiter, like..

name=foo&password=bar&address=123+acacia+avenue&phone=0123456789

..although that doesn't contain any information about the types of input that created that string, nor any validation there was done on it, so it's not ideal for what you call a "template".

More info is needed.

@LostCodeauthorJan 03.2007 — #We use IE only up here so I can access this, and I am able to copy one textarea to clipboard.

What I need to do is get an entire form copied to clip board and then post it into the long description field in Service center.

See attachment of my "test" page, this will not be the final, but I am trying to get this form to copy everything in the form field to clipboard.

I cannot get it work right, validating is no problem, but I want the entire page copied so that we can paste it to the description if nothing else. ?

The hardest thing is going to be getting it to post like "ghost typer" does.

Thanks for your help ?

@mjdamatoJan 03.2007 — #I think there is a much easier and better way to do this than using the clipboard. If I understand you correctly you want all of the form data to be concatenated together and entered into a textarea. If that's the case, then just use the javascript to do that automatically!

Use the following function and you can either run it onclick of the button and have the info updated in the description field when the user clicks the button OR you could run the script onchange of any of the input field so that it is updated automatically.

function updateDescription () {
 frm = document.form1;
 var description = ""
 
 <i>    </i>description += "Action Steps: " + frm.ActionSteps.value;
 <i>    </i>description += "nUsers Affected: " + frm.UsersAffected.value;
 <i>    </i>description += "nCurrent Phone number: " + frm.CurrentPhone.value;
 <i>    </i>description += "nAlt Contact: " + frm.AltPhone.value;
 <i>    </i>description += "nProcedure: " + frm.Procedure.value;
 <i>    </i>description += "nReoccurring: " + frm.PreviousTicketSelect.value;
 <i>    </i>description += "nPrevious Ticket #: " + frm.PreviousTicketNumber.value;
 <i>    </i>//You can add the remaining fields
 
 <i>    </i>frm.Description.value = description;
 }

@thechasboiJan 03.2007 — #LostCode

One idea that you might want to try is getting the innerHTML of a div which contains the form/s in question. Then you have this entire string to work with. You can then use regular expressions to clean out any junk you wish to get rid of and would like to clean up. If you get the innerHTML and get the cssText of the elements you can the use that data to repopulate another form that will look the same as the one/s in question. I hope this helps.

@LostCodeauthorJan 03.2007 — #I think there is a much easier and better way to do this than using the clipboard. If I understand you correctly you want all of the form data to be concatenated together and entered into a textarea. If that's the case, then just use the javascript to do that automatically!

Use the following function and you can either run it onclick of the button and have the info updated in the description field when the user clicks the button OR you could run the script onchange of any of the input field so that it is updated automatically.

function updateDescription () {
 frm = document.form1;
 var description = ""
 
 <i>    </i>description += "Action Steps: " + frm.ActionSteps.value;
 <i>    </i>description += "nUsers Affected: " + frm.UsersAffected.value;
 <i>    </i>description += "nCurrent Phone number: " + frm.CurrentPhone.value;
 <i>    </i>description += "nAlt Contact: " + frm.AltPhone.value;
 <i>    </i>description += "nProcedure: " + frm.Procedure.value;
 <i>    </i>description += "nReoccurring: " + frm.PreviousTicketSelect.value;
 <i>    </i>description += "nPrevious Ticket #: " + frm.PreviousTicketNumber.value;
 <i>    </i>//You can add the remaining fields
 
 <i>    </i>frm.Description.value = description;
 }

[/QUOTE]

That's awesome! The only problem I am having is getting it to actually work. I am creating a button with the following code: <input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription ("copy")"

But it is not copying, did I enter this wrong somehow and I am just too retarded to see it? Or maybe I have the wrong call for "copy to clipboard"

Thanks a lot for your help ?

@felgallJan 03.2007 — #Dod you add a textarea named "description" to your form to receive the results?

You could set the content of the textarea to be selected once it is filled in and then all someone need do is press CTRL-C to then copy it to the clipboard. The clipboard is not accessible from web pages where proper security measures are implemented to protect the computer - also not all devices that can view web pages have a clipboard to start with.

@LostCodeauthorJan 03.2007 — #Dod you add a textarea named "description" to your form to receive the results?

You could set the content of the textarea to be selected once it is filled in and then all someone need do is press CTRL-C to then copy it to the clipboard. The clipboard is not accessible from web pages where proper security measures are implemented to protect the computer - also not all devices that can view web pages have a clipboard to start with.[/QUOTE]

I have a description field that needs to be part of the "copy" as well. it's ID and name is "Description" (see my attachment on previous post)

Ultimately what it needs to do is copy to the clipboard when I click the button (and validate for no empty fields, which I got working already) then when you paste it it should look like this (of course everything past the colon is variable except the (verified) at the end:

Incident or Task Description: some description of some issue

Action steps: playing games

Number of Users Affected: 1

User Name: John Doe

Current Phone number for support to contact you: 555-456-4561 (verified)

Alt Contact person and number: 555-456-4562

Procedure: the one I used

Is this a Reoccurring issue? NO

IF YES then Previous Ticket#: NONE

Have you rebooted? YES

Domain: any

Last Time Worked: yesterday

Location, COLUMN #: does not know (verified)

Location, FLOOR #: does not know (verified)

Location, CUBE #: does not know (verified)

Location, BUILDING NAME: does not know (verified)

City/State: Anywhere OK

User LAN ID: me (verified)

User ID being used at the time of the incident: me (verified)

Employee ID: 12345 (verified)

Cost Code: 1234

Operating System: XP

Computer Name: george (verified)

The concantination is a good idea, and apparently I need to rename something. I am still playing with it, but any help is much apprecaited ?

thanks again!

@mjdamatoJan 03.2007 — #Well, I had tested it on your original source code, so i was a little perplexed at first. There are two problems with your button:

1) The function (at least the one I wrote) does not take any parameters, so you can remove "copy" in the function call.

2) The function was not being called because you had the "copy" in item 1 enclosed in double quotes which were already inside double quotes.

[COLOR=DimGray]<input type="button" name="copyform" value="Copy to Clipboard" onclick=[COLOR=Red][B]"[/B][/COLOR]updateDescription ([COLOR=Blue][B]"[/B][/COLOR]copy[COLOR=Blue][B]"[/B][/COLOR])[COLOR=Red][B]"[/B][/COLOR]>[/COLOR]

So, if you modified the function to take the parameter "copy" you should enclose it in single quotes.

@LostCodeauthorJan 04.2007 — #Well, I had tested it on your original source code, so i was a little perplexed at first. There are two problems with your button:

1) The function (at least the one I wrote) does not take any parameters, so you can remove "copy" in the function call.

2) The function was not being called because you had the "copy" in item 1 enclosed in double quotes which were already inside double quotes.

[COLOR=DimGray]<input type="button" name="copyform" value="Copy to Clipboard" onclick=[COLOR=Red][B]"[/B][/COLOR]updateDescription ([COLOR=Blue][B]"[/B][/COLOR]copy[COLOR=Blue][B]"[/B][/COLOR])[COLOR=Red][B]"[/B][/COLOR]>[/COLOR]

So, if you modified the function to take the parameter "copy" you should enclose it in single quotes.[/QUOTE]

I assume you mean like this:

<input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription('copy')">

I have tried that too, strange enough I cannot get it to work. As far as I can tell it should work, but it doesn't... ?

see my attachment...

thanks again, I really appreciate your help. ?

UPDATE: I just realized that you had used the form ID of "Form1" but I had changed that to "DesksideForm", I adjusted the code as follows:

function updateDescription()

{

//define frm?

frm = document.DesksideForm;

//define variable Template?

var Template = ""

Template += "Incident or Task Description: " + frm.Description.innerText;
  Template += "Action Steps: " + frm.ActionSteps.value;
  Template += "Users Affected: " + frm.UsersAffected.value;
  Template += "Current Phone number: " + frm.CurrentPhone.value;
  Template += "Alt Contact: " + frm.AltPhone.value;
  Template += "Procedure: " + frm.Procedure.value;
  Template += "Reoccurring: " + frm.PreviousTicketSelect.value;
  Template += "Previous Ticket #: " + frm.PreviousTicketNumber.value;

//define holdtext

holdtext.innerText = Template;

Copied = holdtext.createTextRange();

Copied.execCommand("Copy");

}

I combined what you sent with code from here: http://www.htmlgoodies.com/beyond/javascript/article.php/3458851

It keeps telling me that holdtext is not defined, yet as far as I can tell, it is...

If you use just this:

[COLOR=Magenta]<html>

<head>

</head>

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()

{

holdtext.innerText = copytext.innerText;

Copied = holdtext.createTextRange();

Copied.execCommand("Copy");

}

</SCRIPT>

<body>

<CENTER>

<TABLE BORDER="0"><TD>

<textarea ID="copytext" STYLE="height:150;width:162;background-color:pink">Type what you

want to copy</textarea>

<BR>

<TEXTAREA ID="holdtext" STYLE="height:150;width:162"></TEXTAREA>

<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

</TD></TABLE>

</CENTER>

</body>

</html> [/COLOR] It works as is, but cannot get that to work with a form...

@mjdamatoJan 04.2007 — #I assume you mean like this:

<input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription('copy')">[/QUOTE]
Yes, but I also stated that the function I wrote didn't take any parameters so you should not be including anything in the function call unless you had modified the function to accept one, which (from your recent attachment) you hadn't done. So, you should just use this
<input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription()">
Also, just to clarify why [b]onclick="updateDescription("copy")"[/b] will not work. The first " after the '=' tells the browser I am starting the value for the onclick attribute. Then when it gets the very next " it is interpreting that as the end of the value. So your brower interprets this:

[B]onclick="updateDescription("copy")"[/B]

As this

[B]onclick="updateDescription("[/B]

The reasons the script is not working are as follows:

1) Incorrect function call as stated above

2) In the function I used [b]frm = document.form1;[/b] because in the first attachement your form was named "form1", but you changed it in this last attachment to "DesksideForm"

3) You are attmepting to put the formatted text into the "holdtext" field. You gave the field the ID "holdtext" but you did not give it a name. The other script you have above references holdtext by ID, whereas my script attempts to reference holdtext as an element of the form.

To prevent a problem with the form being renamed again, I have modified the script to accept a parameter of the form name so it will be automated. So the function call in the button needs to be changed as well.

Also, you need to include a linebreak between items when creating the "Template" variable or the data from one field will run together with the label from the next.

So, replace the function with this:

function updateDescription (frm) 
 {
 var Template = ""
 
 <i>    </i>Template += "Incident or Task Description: " + frm.Description.value + "n";
 <i>    </i>Template += "Action Steps: " + frm.ActionSteps.value + "n";
 <i>    </i>Template += "Users Affected: " + frm.UsersAffected.value + "n";
 <i>    </i>Template += "Current Phone number: " + frm.CurrentPhone.value + "n";
 <i>    </i>Template += "Alt Contact: " + frm.AltPhone.value + "n";
 <i>    </i>Template += "Procedure: " + frm.Procedure.value + "n";
 <i>    </i>Template += "Reoccurring: " + frm.PreviousTicketSelect.value + "n";
 <i>    </i>Template += "Previous Ticket #: " + frm.PreviousTicketNumber.value + "n";
 <i>    </i>//You can add the remaining fields
 
 <i>    </i>frm.holdtext.value = Template;
 }

And replace the "holdtext" and "Copy To Clipboard" fields like this

&lt;tr&gt;&lt;td&gt;HoldText&lt;TEXTAREA ID="holdtext" name="holdtext" STYLE="height:150;width:162"&gt;&lt;/TEXTAREA&gt;&lt;/td&gt;&lt;td&gt;&lt;label&gt;
 &lt;input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription(this.form)"/&gt;

@LostCodeauthorJan 04.2007 — #

And replace the "holdtext" and "Copy To Clipboard" fields like this

&lt;tr&gt;&lt;td&gt;HoldText&lt;TEXTAREA ID="holdtext" name="holdtext" STYLE="height:150;width:162"&gt;&lt;/TEXTAREA&gt;&lt;/td&gt;&lt;td&gt;&lt;label&gt;
 &lt;input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription(this.form)"/&gt;

[/QUOTE]

OMFG! I cannot believe I left out the name?! I am such a dolt...I am sorry, it has been about 4 years since I programmed at all...and now I feel like a real idiot, I will try this and let you know...thanks a lot

@LostCodeauthorJan 04.2007 — #Okay, it now copies to the textarea...I will mess with it and see if I can get it to copy to the clipboard...thanks a bunch!

BTW, you rock man!

@LostCodeauthorJan 04.2007 — #apparently I just suck...I wish everyone was as helpful as you guys ?

@LostCodeauthorJan 04.2007 — #can I out multiple onclick actions in one button?

I assume that is I could it'd be something like [COLOR=Blue]onclick="updateDescription(this.form);ClipBoard90; MM_validateForm('ActionSteps','','R','UsersAffected','','RisNum','CurrentPhone','','RisNum','AltPhone','','RisNum','Procedure','','R','PreviousTicketNumber','','R','LastTimeWorked','','R','Column','','R','Floor','','R','Cube','','R','BuildingName','','R','CityState','','R','LANID','','R','CurrentID','','R','EmployeeID','','R','CostCode','','R','ComputerName','','R','Description','','R');return document.MM_returnValue"[/COLOR]

With the code you created moving the info to the text area then using the code I found on that other site to move it to the clipboard, then validating the whole thing (validate would actually be first, but I but it last since it is so long).

Also, I know the validate code works onSubmit, but I need it to work onclick, so this is the only way I can imagine it...

@mjdamatoJan 04.2007 — #yes, you can ad multiple functin calls to an onclick evenet. But, it may not be the most efficient. For example, if validation fails you don't want to continue. So, it wouold make more sense to have one function, if it passes, to call the next function.

I still don't understand why you are copying this to the clipboard. I thought you were using the form to post the data. Also, you could set up a global variable to set the fields and preferences for validation instead of passing all that data in the MM_ValidateForm function.

@felgallJan 04.2007 — #You just include semi-colon separated Javascript statements in the onclick= or just stick them all in a function and call that from the onclick so as to have less Javascript cluttering your HTML.

@sovikJan 04.2007 — #I dont want to open a new topic, so might you guys can answer my question about a clipboard.

Is it possible to get the image from the clipboard using JS and paste it in the web page?

@mjdamatoJan 04.2007 — #I dont want to open a new topic, so might you guys can answer my question about a clipboard.

Is it possible to get the image from the clipboard using JS and paste it in the web page?[/QUOTE]

Maybe I am totally missing something here. But, why do you want to copy data to the clipboard, only to copy it back from the clipboard. There has got to be a better solution. Where exactly are you wanting the information from your form to end up?

@sovikJan 04.2007 — #mjdamato, I think you do miss understand something ? I just asked a question about a clipboard which has nothing to do with the main problemm. Probabbly it was a bad idea not to open a new thread. ?

@LostCodeauthorJan 04.2007 — #yes, you can ad multiple functin calls to an onclick evenet. But, it may not be the most efficient. For example, if validation fails you don't want to continue. So, it wouold make more sense to have one function, if it passes, to call the next function.

I still don't understand why you are copying this to the clipboard. I thought you were using the form to post the data. Also, you could set up a global variable to set the fields and preferences for validation instead of passing all that data in the MM_ValidateForm function.[/QUOTE]

The only reason I am doing the clipboard thing is cause I need something that I can use starting Monday, then from there I am going to try and get it to post to another program. I only do it this way because I imagined it would be easier that way. but if I can get it to send the information to another program easier by say clicking in a text field in a ticket then going to my template and clicking send, then I'd go that way now instead, but I have no idea where to start on that...I do not program for a living, but I want to and I am so rusty I can hardly remember basic HTML from memory anymore. ?

I just wish I could get all this wonderful code to work together, standa alone it works fine, but getting the clipboard function to work has been the bane of my existance!

LOL

@LostCodeauthorJan 04.2007 — #There has to be a way to copy to clip board in one bit of code. I cannot imagine that the creators of these programming languages haven't made anything like that.

Okay, so I can get all this info into a text area, now, how do I get it into the clipboard? I thought of trying to add somethign like onChange="execCommand('Copy')" to the textarea, but apparently execCommand('Copy') is not a "default" function...*sigh*

This is so frustrating...I am sorry to be such a pain.

@LostCodeauthorJan 06.2007 — #Check it out! Keep in mind, it only works in IE.

Any ideas how I can make it so the copy function will not run if errors are returned? I was thinking of an if else statement, but I am wondering what you think?

[upl-file uuid=11328612-d732-4db1-8a12-5c47aa056e04 size=2kB]Deskside.zip[/upl-file]

@thanhvudngApr 01.2007 — #Check it out! Keep in mind, it only works in IE.

Any ideas how I can make it so the copy function will not run if errors are returned? I was thinking of an if else statement, but I am wondering what you think?[/QUOTE]
When write to new pape ? Please help me

@LostCodeauthorApr 05.2007 — #When write to new pape ? Please help me[/QUOTE]

I am not sure I understand the question...

I have attached the semi-completed version of my template tool. Still working on how to make it paste into a third party program.

[upl-file uuid=65c677fb-981b-43e0-b431-466fff86cf57 size=4kB]Deskside Template.zip[/upl-file]

@kolboyJun 29.2013 — #I am not sure I understand the question...

I have attached the semi-completed version of my template tool. Still working on how to make it paste into a third party program.[/QUOTE]

Hi. I stumbled upon your code and am trying to use it for the same purpose of pasting the content on a logging software. below is the code that i created from your original code but it doesnt seem to work...please check on where i went wrong..thanks!

<!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=iso-8859-1" />

<title>DTC Logging Tool</title>

</head>

<SCRIPT LANGUAGE="JavaScript">

function updateDescription (frm)

{

var Template = ""

Template += "Service Tag: " + frm.ServiceTag.value + "rn";
  Template += "System Type: " + frm.SystemType.value + "rn";
  Template += "OS: " + frm.OS.value + "rn";
  Template += "***DTC Entitled*** " ;
  Template += "DTC Order Number: " + frm.DTCOrderNumber.value + "rn";
  Template += "Issue: " + frm.Issue.value + "rn";
  Template += "Troubleshooting Steps: " + frm.TS.value + "rn";
  Template += "HFN Tool Used: " + frm.HFNTool.value + "rn";
  Template += "DC Session ID: " + frm.DCSessionID.value + "rn";
   Template += "Cobro: " + frm.Cobro.value + "rn";
   Template += "NTP:  " + frm.NTP.value + "rn";
   Template += "Heatcheck: " + frm.Heatcheck.value + "rn";
   Template += "NonSat Reason: " + frm.NonSatReason.value + "rn";
 
  frm.holdtext.value = Template;
   Copied=frm.holdtext.createTextRange();
   Copied.execCommand('copy');
   alert('Information has been copied, right click and select paste or press ctrl+V to paste into Delta');

}

</SCRIPT>

<body align=center>

<form id="DesksideForm" name="DesksideForm" method="post" action="">

<br>

<table cellspacing="20" align="center"><tr><td valign="middle"></td>

<td><font

size="+2"><b>DTC Logging Tool</b></font></td><td></td></tr></table>

<table align="center" cellpadding="0" cellspacing="0">

<tr>

<td valign="middle">Service Tag:</td>

<td><input name="ServiceTag" type="text" id="ServiceTag" value="" size="30" /></td>

</tr>

<tr>

<td valign="top">System Type:</td>

<td><input name="SystemType" type="text" id="SystemType" size="30" /></td>

</tr>

<tr>

<td valign="top">OS:</td>

<td><input name="OS" type="text" id="OS" size="30" /></td>

</tr>

<tr>

<td valign="top">***DTC Entitled***</td>

<td> </td>

</tr>

<tr>

<td valign="top">DTC Order Number:</td>

<td><input name="DTCOrderNumber" type="text" id="DTCOrderNumber" size="30" /></td>

</tr>

<tr>

<td valign="top">Issue:</td>

<td><input name="Issue" type="text" id="Issue" size="30" /></td>

</tr>

<tr>

<td width="332" valign="middle"><label id="TS">Troubleshooting Steps:</label></td>

<td width="365"><textarea name="TS" cols="50" rows="4" wrap="virtual" id="TS"></textarea></td>

</tr>

<tr>

<td valign="top">HFN Tool Used:</td>

<td><label>

<select name="HFNTool" size="1" id="HFNTool">

<option value="" selected="selected"></option>

<option value="YES">YES</option>

<option value="NO">NO</option>

</select>

</label></td>

</tr>

<tr>

<td valign="top">DC Session ID:</td>

<td><input name="DCSessionID" type="text" id="DCSessionID" size="30" /></td>

</tr>

<tr>

<td valign="top">Cobro:</td>

<td><label>

<select name="Cobro" size="1" id="Cobro">

<option value="" selected="selected"></option>

<option value="YES">YES</option>

<option value="NO">NO</option>

</select>

</label></td>

</tr>

<tr>

<td valign="top">NTP:</td>

<td><input name="NTP" type="text" id="NTP" size="50" /></td>

</tr>

<tr>

<td valign="top">Heatcheck:</td>

<td><label>

<select name="Heatcheck" size="1" id="Heatcheck">

<option value="" selected="selected"></option>

<option value="SAT">SAT</option>

<option value="NonSAT">NonSat</option>

</select>

</label></td>

</tr>

<tr>

<td width="332" valign="middle"><label id="NonSatReason">NonSat Reason:</label></td>

<td width="365"><textarea name="NonSatReason" cols="50" rows="2" wrap="virtual" id="NonSatReason"></textarea></td>

</tr>

<tr>

<td align="center" valign="middle"><label>

<input type="reset" name="Reset" value="Clear Template" />

</label></td>

<td align="center" valign="middle"><input type="button" name="copyform" value="Complete" onclick="updateDescription(this.form)"/> </td>

</tr>

</table>

<textarea name="holdtext" cols="100" rows="10" id="holdtext" style=visibility:hidden></textarea>

</form>

</body>

</html>

@cartoon_bagJun 30.2013 — #I think there is a much easier and better way to do this than using the clipboard.

cool design

Also in #JavaScript _↴

Is it possibile to animate elements positioning?Running total in a single input field?navigation script uncompatable

Success!

Help @LostCode spread the word by sharing this article on Twitter...

Tweet This

How to copy an entire form to clipboard?

27 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to copy an entire form to clipboard?

27 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

27 Comments(s) _↴

Also in #JavaScript _↴