What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Automatically fill a text box with the value of another text box

    Asked by pepjf on September 11, 2013 at 08:25 PM

    Hello,

    I have a form (http://form.jotform.co/form/32535151535853) that requests the user's full name.

     

    On the last few pages of the form where the user has to sign some disclaimers, their names are supposed to be filled in again.  So, instead of them having to type in their name, is it possible for the names to the automatically inputted from the information they provided earlier.  Thanks!

    Page URL:
    http://form.jotform.co/form/32535151535853

    fill JotForm style size name
  • Profile Image

    Answered by khrisell on September 11, 2013 at 09:00 PM

    Hello,

    Kindly check this form.

    http://form.jotformpro.com/form/32537528833965

    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 "Peter", 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.
    If this is what you are trying to achieve, here's the instruction on how can achieve.

    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 namedcopy_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 Variables and " title="" >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, "onClick" must be in lowercase ("onclick") in order for XHTML pages to validate. (This applies even in cases of Transitional XHTML.)

     

    Kindly let us know if you need further assistance.
    Thank you for using JotForm. :)
  • Profile Image

    Answered by pepjf on September 17, 2013 at 01:39 PM

    Thanks Khrisell, But I think there must be a simpler way for what I want to do though. so I am not sure if I explained what I wanted to do properly.

    The user fills in their name at the beginning of the form and I want the same name replicated on 3 other parts of the form.  There is no question if they are the "sales person" or not, the same name just needs to be replicated. Is this possible to do?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 17, 2013 at 03:18 PM

    Hello pepjf,

    If I understand your requirement clear, you want to populate some fields of your form with the value of another textbox in the same form. Is that correct?

    If yes, it can only be achieved by adding custom JaveScript in your form's source code. I will work and send you source code of your form after adding custom JaveScript code.

    You want to display the "Name of Applicant (Print)*" textbox should have value of "Full Name" from your form's first page. Please do confirm.

    Thank you!

  • Profile Image

    Answered by pepjf on September 17, 2013 at 03:30 PM

    Thanks Ashwin, that's right, I appreciate your help.

     

    So, I wanted the full name to be prepopulated in 3 sections of the form (towards the end) where it says "Name of Applicant (Print)*"

    Also needed to prepopulate the guardian's name where it says "Name of Parent/Guardian...", this also appears in 3 sections of the form.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 17, 2013 at 03:51 PM

    Okay.

    I will work on your form and I will get back to you if any question arises.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 18, 2013 at 06:26 AM

    Hello pepjf,

    I have added the custom JavaScript code in your form's source code. Do check and let me know if this behaves as you wanted.

    Your form's source code can be downloaded from here:  http://pastebin.com/sY7urC2n

    Here are the steps you should follow to test your form:

    1. You should download your form's full source code. This guide should help you:  http://www.jotform.com/help/104-How-to-get-your-Form-Source-Code

    2. Open the ".html" file and replace the existing code with the custom code from my download url:  http://pastebin.com/sY7urC2n

    3. Test your form.

    Thank you!

  • Profile Image

    Answered by pepform on September 18, 2013 at 12:25 PM

    Thanks Ashwin,

    I think I am "lost" so, I was able to view the source code from the pastebin link

    I was also able to the form code but I am not sure how to replace my current code with the new one.

    When I click on "here" ina the source code screen, it looks like it downloads the content to the zip file.  Where do I then go from here?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 18, 2013 at 01:37 PM

    Hello pepform,

    When you download the zip file and extract it, you will see that along with two folders (css and js) you will have a html file with name "Good version of PEP Form.html".

    You should open this ".html" file in notepad and delete all the code. Now you should copy the code which you see in pastebin link and paste this code in the notepad and close this file (after saving). 

    Now double click to open this file in browser and do your test.

    Hope this helps.

    Thank you!

  • Profile Image

    Answered by pepjf on September 18, 2013 at 02:04 PM

    Thanks Ashwin,

    I was able to update it in html, but nothing happens when I double click it.

     

    I made a clone of the form (http://form.jotform.co/form/32604795474866), it you are able to please assist with updating the code on this one that will be much appreciated.  I am obviously limited in my IT. knowledge.  Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 18, 2013 at 04:02 PM

    Hi,

    We will check the updated form and get back to you with the updated script.

    Please stay in touch for updates!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 19, 2013 at 06:22 AM

    Hello pepjf,

    I have added the custom JavaScript code in your form's source code. You can download it from here:  https://shots.jotform.com/ashwin/Good%20version%20of%20PEP%20Form1.zip

    You should download the zip file and extract the files. Now you should open the "Good version of PEP Form1.html" file in any web browser to test the form.

    To open this file in browser, you should right click on this ".html" file, click "Open with" and then click on any browser (mozilla / chrome).

    Hope this helps. Do let me know if the form works as expected.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 19, 2013 at 06:36 AM

    Once you confirm that form works as expected, then I will guide you how to embed this form in your webpage.

    Thank you!

  • Profile Image

    Answered by pepjf on September 19, 2013 at 06:58 AM

    Thanks Ashwin,

    It worked perfectly in the zip file.  But I don't want to embed it in my webpage for now- the site is not ready.  I'll just give users the jotform link so that they can fill in the form.  I check the link for the form, and the update you made is not reflected there.  Are you able to assist in updating this link with the source code that worked please.

    http://form.jotform.co/form/32604795474866

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Welvin on September 19, 2013 at 10:45 AM

    Hi,

    Unfortunately, you cannot import the function or the workarounds provided to you by my colleagues to the form builder. You will have to upload the modified source codes of your form to your server/host including the HTML file. After that, you'll have to get the path of the HTML file and share it to your users as a webpage link.

    Let us know if you need any further assistance.

    Thanks

  • Profile Image

    Answered by pepjf on September 19, 2013 at 04:20 PM

    Thank you. I'll be in touch then once I am able to add this to my webpage.