Form Users Can Easily Copy The Content Between Fields

The form pictured below illustrates our objective. Click the image to use the form.

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 checkmark would suffice. The same obtains to 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 checkboxes 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 checkboxes, 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 checkboxes, 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 – 10, 12 – 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 checkmark 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 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 Variables and 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 checkmark 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 checkmark 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 straight away 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 checkmark from one of the checkboxes 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 checkmark 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, “onClick” must be in lowercase (“onclick”) in order for XHTML pages to validate. (This applies even in cases of Transitional XHTML.)