www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: How to copy an entire form to clipboard?

  1. #1
    Join Date
    Jan 2007
    Posts
    14

    How to copy an entire form to clipboard?

    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!

  2. #2
    Join Date
    Dec 2006
    Location
    Scotland
    Posts
    450
    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.

  3. #3
    Join Date
    Jan 2007
    Posts
    14
    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
    Last edited by LostCode; 01-05-2007 at 07:12 PM.

  4. #4
    Join Date
    Nov 2006
    Posts
    528
    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.

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

  5. #5
    Join Date
    Sep 2006
    Location
    Cleveland
    Posts
    579
    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.

  6. #6
    Join Date
    Jan 2007
    Posts
    14
    Quote Originally Posted by mjdamato
    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.

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

    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

  7. #7
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    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.
    Last edited by felgall; 01-03-2007 at 02:58 PM.

  8. #8
    Join Date
    Jan 2007
    Posts
    14
    Quote Originally Posted by felgall
    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.

    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!

  9. #9
    Join Date
    Nov 2006
    Posts
    528
    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.

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

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

  10. #10
    Join Date
    Jan 2007
    Posts
    14
    Quote Originally Posted by mjdamato
    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.

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

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

    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/ja...le.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:

    <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-colorink">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>
    It works as is, but cannot get that to work with a form...
    Last edited by LostCode; 01-05-2007 at 07:12 PM.

  11. #11
    Join Date
    Nov 2006
    Posts
    528
    Quote Originally Posted by LostCode
    I assume you mean like this:

    <input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription('copy')">
    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
    Code:
    <input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription()">
    Also, just to clarify why onclick="updateDescription("copy")" 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:
    onclick="updateDescription("copy")"
    As this
    onclick="updateDescription("

    The reasons the script is not working are as follows:
    1) Incorrect function call as stated above
    2) In the function I used frm = document.form1; 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:
    Code:
    function updateDescription (frm) 
    {
        var Template = ""
    
        Template += "Incident or Task Description: " + frm.Description.value + "\n";
        Template += "Action Steps: " + frm.ActionSteps.value + "\n";
        Template += "Users Affected: " + frm.UsersAffected.value + "\n";
        Template += "Current Phone number: " + frm.CurrentPhone.value + "\n";
        Template += "Alt Contact: " + frm.AltPhone.value + "\n";
        Template += "Procedure: " + frm.Procedure.value + "\n";
        Template += "Reoccurring: " + frm.PreviousTicketSelect.value + "\n";
        Template += "Previous Ticket #: " + frm.PreviousTicketNumber.value + "\n";
        //You can add the remaining fields
    
        frm.holdtext.value = Template;
    }
    And replace the "holdtext" and "Copy To Clipboard" fields like this
    Code:
    <tr><td>HoldText<TEXTAREA ID="holdtext" name="holdtext" STYLE="height:150;width:162"></TEXTAREA></td><td><label>
      <input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription(this.form)"/>
    Last edited by mjdamato; 01-04-2007 at 10:32 AM.

  12. #12
    Join Date
    Jan 2007
    Posts
    14
    Quote Originally Posted by mjdamato

    And replace the "holdtext" and "Copy To Clipboard" fields like this
    Code:
    <tr><td>HoldText<TEXTAREA ID="holdtext" name="holdtext" STYLE="height:150;width:162"></TEXTAREA></td><td><label>
      <input type="button" name="copyform" value="Copy to Clipboard" onclick="updateDescription(this.form)"/>

    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

  13. #13
    Join Date
    Jan 2007
    Posts
    14
    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!
    Last edited by LostCode; 01-04-2007 at 10:47 AM.

  14. #14
    Join Date
    Jan 2007
    Posts
    14
    apparently I just suck...I wish everyone was as helpful as you guys

  15. #15
    Join Date
    Jan 2007
    Posts
    14

    Quick question

    can I out multiple onclick actions in one button?

    I assume that is I could it'd be something like onclick="updateDescription(this.form);ClipBoard90; MM_validateForm('ActionSteps','','R','UsersAffected','','RisNum','CurrentPhone','','RisNum','AltPhon e','','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"

    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...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles