How to Give Users the Ability to Easily Copy Content from One Field to Another

Last Update: April 10, 2015

There's now an easier way to accomplish the functionality described in this guide. However, in some cases the method below will be necessary.


The form pictured below illustrates our objective (Click image to use form):
Copy Contents of Fields to Similar Fields

As you can see, if a user were to enter his name in the "Your Name" field and wanted to use the same name in the "Salesperson's Name" field, all he would need to do is check "You are the salesperson". If he later decided to put a different name in the second field (like "Batman", for instance) clicking the check box again to remove the check mark would suffice. The same obtains for the "Your Email" and "Salesperson's Email", and "Home Address" and "Salesperson's Address" fields respectively. If you complete and submit the form (click the image above) you'll see that the entries pasted when the check boxes were clicked will also appear in the autoresponse.

The page within which the form is embedded contains a block of JavaScript just above the closing "body" tag that, along with onClick event handlers, in the input tags of the check boxes, gives the form its "copy & paste" functionality.


How to Incorporate This Functionality Into One of Your Own Forms

Let's say you had a form with two postal address fields ("Home Address" and "Business Address") and you wanted to give users the option to copy the first address to the second. Here's what you would do:

1. Load the form into the form builder and insert a check box field just before the "Business Address" field 

2. Click "Options", remove Options 2 and 3, rename "Option 1" it "Same Address as Above" and click "OK"

3. Change the label for that check box field from "Click to edit" to "Same Address as Above"

4. Use Firebug or another web developer tool to quickly find out the ID of the check box's label (alternatively, just search the source) and use injected CSS to hide it with a declaration of either display:none; or visibility:hidden;, depending on your requirements. So, if the label's ID was label_6 and you wanted to just hide it without repositioning any adjacent elements, you would inject the following rule:

#label_6 {
  visibility:hidden;
}

5.  Save the form and go to the Setup & Embed tab, click Embed Form, click the Source button and copy the code provided by the wizard. (It is not currently possible for the "copy & paste" magic to work at a form's own address.)

6. Paste the form's source into the web page in which you want the form to appear

7. Search the source for the string value="Same Address as Above" /> and change it to value="Same Address as Above" onclick="copy_address();" />

8. Add this JavaScript block just before the closing "body" tag and in the said block of JavaScript replace every instance of  "12885302469" with your form's ID (the string of digits at the end of its URL that can be seen when previewing the form, as highlighted in this example)

9. Search the source for Home Address and note the recurring digit or number that appears on the same line, the one above it and the one below (see screenshot).

10. In the JavaScript block replace every "5" indicated in this screenshot with the digit or number noted in Step 9. (Of course, if the digit happens to be  "5", there would be no need to edit that part of the script.)

11. Search the source for Business Address and note the recurring digit or number that appears on the same line, the one above it and the one below (see screenshot).

12. In the JavaScript block replace every "8" indicated in this screenshot with the digit or number noted in Step 11. (Of course, if the digit happens to be  "8", there would be no need to edit that part of the script.)

How Does It Work?

If you view the source of the web page within which the example form (hereinafter called the "Hollywood" form) pictured above is embedded, you will see the block of JavaScript just before the ending body tag. This, along with "onClick event handlers" in the input tags of the check boxes, is what enables the form's "copy & paste" functionality.

Let's partially break down the contents of the JavaScript block (link opens in a separate tab - line numbers are included for easy reference) :

Lines 1 - 1012 - 19 and 21 - 38 are three separate but similar functions named copy_name()copy_email() and copy_address() respectively, each of which contains an IF ELSE statement.


The First Function: copy_name()
RE: Lines 1 - 10

This copies the first and last names from the "Your Name" field to the one labeled "Salesperson's Name" when the "You are the salesperson" box is checked by the user and clears the entries from the "Salesperson's Name"  field if the check mark is removed. The IDs for the inputs can be found in the form's source and are listed below. (The inputs they identify are in parentheses.)

input_11_0 ("You are the salesperson" check box)

first_6 ("First Name" text box in the "Salesperson's Name" field)
last_6 ("Last Name" text box in the "Salesperson's Name" field)

first_3 ("First Name" text box in the "Your Name" field)
last_3 ("Last Name" text box in the "Your Name" field)

Line 3 examines the state (value) of the "You are the salesperson" check box (input_11_0) within the form (form_12885302469) which in turn exists within the document. IF the box is checked, the condition (in parentheses) will evaluate to TRUE and the code between the first pair of braces after the condition (Lines 4 - 5: the TRUE branch of the IF ELSE statement) will be executed. Otherwise (ELSE) if the box is unchecked by the user, the FALSE branch (Lines 7 - 8) will be run.

The TRUE Branch Explained

Line 4 basically declares that the "First Name" input in the "Salesperson's Name" field will be filled with whatever is entered in the "First Name" input of the "Your Name" field. The same obtains for Line 5: whatever is entered in the "Last Name" box of the "Your Name" field (last_3) will be copied to the "Last Name" box (last_6) of the "Salesperson's Name" field.

The FALSE Branch Explained

Line 7 declares that the "First Name" box of the "Salesperson's Name" field (first_6) will contain nothing, as denoted by the empty string: nothing between the double-quotes at the end of the line - see " _mce_href="">Variables and " _mce_href="">Different Types of Variables.

In like manner, Line 8 declares that the "Last Name" box of the "Salesperson's Name" field (last_6) will contain nothing.


The Second Function: copy_email()
RE: Lines 12 - 19

This function copies the email address entered in the "Your Email" box to the "Salesperson's Email" box when "Same email as above" is checked by the user and clears the address from the "Salesperson's Email" box when the check mark is removed. The IDs for the boxes (inputs) can be found in the form's source and are listed below:

input_13_0 ("Same email as above" check box)

input_7 (email address in the "Salesperson's Email" text box)

input_4 (email address in the "Your Email" text box)

Line 14 examines the state of the check box (input_13_0) and IF the box is checked by the user, that line will evaluate to TRUE and the TRUE branch (Line 15) will be executed. ELSE the FALSE branch (Line 17) will be run.

This statement's TRUE branch declares that the "Salesperson's Email" box will be filled with whatever is entered in the "Your Email" field if  "Same email as above" is checked and the FALSE branch will clear the text box if the check mark is removed.


The Third Function: copy_address()
RE: Lines 21 - 38
This function copies all six of the postal address elements entered in the "Home Address" field to their equivalent inputs in the "Salesperson's Address" field IF the "Same address as above" box is checked and clears the "Salesperson's Address" field when the check mark is removed. The IDs for all of the inputs are listed below:
input_12_0 ("Same address as above" check box) input_8_addr_line1 ("Street Address" text box in "Salesperson's Address" field)
input_8_addr_line2 ("Street Address Line 2" text box in "Salesperson's Address" field)
input_8_city ("City" text box in "Salesperson's Address" field)
input_8_state ("State / Province" text box in "Salesperson's Address" field)
input_8_postal ("Postal / Zip Code" text box in "Salesperson's Address" field)
input_8_country ("Country" drop down in "Salesperson's Address" field)
input_7_addr_line1 ("Street Address" text box in "Home Address" field)
input_7_addr_line2 ("Street Address Line 2" text box in "Home Address" field)
input_7_addr_city ("City" text box in "Home Address" field)
input_7_state ("State / Province" text box in "Home Address" field)
input_7_postal ("Postal / Zip Code" text box in "Home Address" field)
input_7_country ("Country" drop down in "Home Address" field)

From what was stated above in the "copy_name()" and "copy_email()" functions, one can see how this third function is constructed.


Event Handlers

As stated at the outset, In order for the above functions to work, they must be "called" by onClick event handlers in the input tags of the relevant check boxes. If you search for "onclick" in the source of the page within which the example form is embedded, four instances will be found:

onclick="copy_name();"
onclick="copy_email();"
onclick="copy_address();"
onclick="JotForm.reloadCaptcha('input_10');"

You will notice straightaway that the values of the first three consist of the functions' names. Incidentally, those names are totally arbitrary and "makeItSo()", "letItBe()" and "itsMyPrerogative()" would have worked just as well! However, it is always advisable to name functions according to their purpose. Also, the semicolons aren't absolutely necessary but it's considered good coding practice to include them, in the same vein that they should be included after the last declaration in a CSS rule.

The first three onClick event handlers had to be manually entered into the source while the fourth was automatically inserted by the Embed Form Wizard and is not relevant to the topic at hand.


A Few Things to Bear in Mind

1. Since the copying functionality depends not only on the JavaScript block but also on the onClick events, each time you overwrite the form's source with updated code from the Embed Form Wizard, the said event handlers must be re-inserted.

2. In the Hollywood form, you may have noticed a slight difference in appearance between the "Your Email" and "Salesperson's Email" fields. This accommodates a quirk in Internet Explorer where if a hint example is used, the pasted content of the field is rendered in the same gray color and (more importantly) does not show up in email alerts.

3. The copying works only in one direction. So, entering "Cat Woman" in the "Salesperson's Name" field of the Hollywood form and checking "You are the salesperson", would NOT paste "Cat Woman" into the "Your Name" field.

4. Removing the check mark from one of the check boxes will clear whatever content exists in the field it controls, whether that content was previously pasted from the related field or not.

5. A user could well check one of the boxes to copy an entry and then change the pasted entry while leaving the check mark in place, causing conflicting information to be registered in the submission records of the form. This is just a cosmetic issue, as the text box entry would obviously be the correct one.

6. Instead of camel case, "onClickmust be in lowercase ("onclick") in order for XHTML pages to validate. (This applies even in cases of Transitional XHTML.)


7 Comments...


   
NOWinMotion (November 21, 2011 at 01:58 PM)

Is there any way to still have this functionality if you use iFrame to add the form to your page? Or to have it work with Facebook?

Thanks.

View Answer


   
aylin77 (August 29, 2012 at 08:31 AM)

Thank you so much for this tutorial !

Question : is it possible to copy "your email" to "salesperson's email" and (with another checkbox) to a third email field, let's say "Administrative agent's email" ?

I tried it but, with another checkbox and another function (with its own name "copy_email_admin") called with "onclick" from the right checkbox, but it doesn't work.

Thanks you !

View Answer


   
billylevine2003gmailcom (June 28, 2013 at 05:38 AM)

two question can I use the above but instead of override the pre-populate with an input field I want to use a drop down. In other word how due I make the pre-polulate the default for the drop down

View Answer


   
billylevine2003gmailcom (June 28, 2013 at 05:39 AM)

2nd question I do not see the copy past option in the the embed wizard you mention I only see the download option

View Answer


   
mdevane (December 21, 2013 at 08:26 AM)

not sure if this is the right function, but I simply want to "re-use" data inputs from beginning of a long form at the end. e.g. - Applicant enters their legal name at top of page 1. I want to use that information to fill into a legal authorization at end of form.

I do not need options to "uncheck" and 2nd set of copied fields would be "read-only" so that they cannot be modified by form user, unless they go back to first page and change the field content there. Avoids inadvertent modifications to same Legal Name.

How would I do this function?

View Answer


   
anixter1 (June 18, 2014 at 03:09 PM)

I have gone through this several times and I can't figure out what I'm doing wrong. Cannot get it to work. Here is my code. Please help!




JotForm.init();





.form-label-left{
width:150px !important;
}
.form-line{
padding-top:12px;
padding-bottom:12px;
}
.form-label-right{
width:150px !important;
}
.form-all{
width:690px;
color:#555 !important;
font-family:'Lucida Grande';
font-size:14px;
}
.form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
color:#555;
}

/* Injected CSS Code */
#id_3 {
display:none;
}
/* Injected CSS Code */









Test Auto populate




Home Address





Same address as above




Same address as above







Business Address





Should be Empty:






document.getElementById("si" + "mple" + "_spc").value = "41686076801963-41686076801963";



function copy_address()
{
if(document.form_41606778201958.input_12_0.checked){
document.form_41606778201958.input_4_addr_line1.value=document.form_41606778201958.input_2_addr_line1.value;
document.form_41606778201958.input_4_addr_line2.value=document.form_41606778201958.input_2_addr_line2.value;
document.form_41606778201958.input_4_city.value=document.form_41606778201958.input_2_city.value;
document.form_41606778201958.input_4_state.value=document.form_41606778201958.input_2_state.value;
document.form_41606778201958.input_4_postal.value=document.form_41606778201958.input_2_postal.value;
document.form_41606778201958.input_4_country.value=document.form_41606778201958.input_2_country.value;
}else{
document.form_41606778201958.input_4_addr_line1.value="";
document.form_41606778201958.input_4_addr_line2.value="";
document.form_41606778201958.input_4_city.value="";
document.form_41606778201958.input_4_state.value="";
document.form_41606778201958.input_4_postal.value="";
document.form_41606778201958.input_4_country.value="";
}
}

View Answer


   
florian40 (July 28, 2014 at 06:26 PM)

Isn't there a simpler way, like a quick tool, or a widget?

View Answer


Send Comment