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

    How do I automatically copy the value of one textbox to another?

    Asked by frcr_sg on December 21, 2013 at 11:40 AM

    I would

    like to set a Date field equal to another Date field when the condition of a textbox is met. For example: I have a textbox where an integer is typed, to toAdress field is hidden until the textbox int value is more than one. but if it is one it should be equal to the visible date field?
    auto-populate values keyup onkeyup on keyup JavaScript events text boxes textboxes
  • Profile Image
    JotForm Support

    Answered by abajan on December 21, 2013 at 12:17 PM

    Hello,

    Please have a look at this guide and let us know if it's along the lines of your requirements.


    Thanks

  • Profile Image

    Answered by frcr_sg on December 21, 2013 at 02:03 PM
    Sort off
    But this guide is too complicated for me to understand
    Possible to provide a simplified version?
    Just using textbox1 and textbox2, such that when textbox1 is entered, textbox2 has the same value
    Thank
    Sent from Samsung Mobile
    ...
  • Profile Image
    JotForm Support

    Answered by abajan on December 21, 2013 at 04:33 PM

    Hi again,

    Unfortunately, I only just saw your reply and I'll be offline for the next several hours but in the meantime please have a look at this demo. Whatever is entered in the text boxes of one of its "Full Name" fields, will appear in the equivalent text boxes of the others. Near the bottom of the page's source you'll see this script which is responsible for the aforementioned behavior. I'll explain it when I come back online.


    Ciao for now.

  • Profile Image

    Answered by frcr_sg on December 22, 2013 at 07:39 AM
    thank , this one looks a little more digestible ;-)
    how do i incorporate into the jot form ??
    ...
  • Profile Image
    JotForm Support

    Answered by abajan on December 22, 2013 at 11:08 AM

    Actually, having re-read your penultimate reply, I think for the time being it would be better to go with a simpler demo of just two text boxes which mutually populate each other. From there, once you have a firm grasp of how this all works, we can parse the more complex script of the first demo. So, here's the simpler version and here's the script that makes it tick.

    How it Works
    Keep the script open in a separate browser tab or window and follow along.

    First, clone this form which is used in the simpler demo and find out the IDs of its two text boxes. (See: Cloning a form from a Web Page.) Once those IDs are known, they can be used in the script.

    Lines 2 and 3 of the script are variable assignments:

        var box0 = $('input_3'),

            box1 = $('input_4');

    They are not really necessary but are included here to make it easier for you to understand how the script works. For example, were

    box0 = $('input_3'),

    to have been omitted, $('input_3') could have been substituted for each instance of box0 and the script would still work but it's easier to see that box0 refers to the field labeled Box 0. You'll come to appreciate this more in larger, more complex scripts (like that used in the first demo).

    The Keyup Event

        box0.on('keyup', function () {

            box1.value = $F(this);

        });

     

        box1.on('keyup', function () {

            box0.value = $F(this);

        });


    JavaScript (the language in which the script is written) has several events which can be attached to text inputs but keyup was used in the demo to update the changes in real-time (as each key is released), as opposed to (say) blur whose result would be seen only after the focus has been removed from the observed input. So, the first section of code above listens for a keyup event on box0 and invokes (executes) the function detailed in the second parameter whenever such an event occurs. Okay, that's a mouthful! However, it's important that you grok what was just stated.

    So, what exactly does the function in each section do? Let's look at the code in the first one's body:

    box1.value = $F(this);

    This can be interpreted as

    "Make the value (contents) of the Box 1 field be equal to the value of whatever field invoked (called) the function."

    $F(this) is basically a shortened form of this.value. $F is what's known as a "convenience alias" of the Prototype Framework which returns the value of whatever is in its parens. $F (and $) can be used in the script because JotForm forms are Prototype based. However, it should be noted that $F(box1) could not have been substituted on the left side of the equation for box1.value.

    So, in its entirety, the first block of code is saying:

    "Whenever a key is released in Box 0, populate Box 1 with the new value of Box 0 (this) field."

    The last block of code works in the same manner, except that it populates Box 0 with the new value of Box 1.

    As a matter of interest, the whole script is an immediately invoked function expression (IIFE pronounced "iffy", as in I'm not sure IF I really needed to know that! lol). 

    Anyway, that's pretty much all you really need to know to make one text box populate another. The script for the first (more complex) demo is somewhat similar but its functions are defined separately. I can always go into that with you at a later juncture but I think the script for the simpler demo is sufficient for now. As you have already figured out, this stuff can get really deep and I didn't want to give you indigestion! ;)

    If you would like clarification on anything, I'd be more than happy to explain it further.


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on December 22, 2013 at 12:20 PM

    I forgot to mention that in order for this to work, the form's full source needs to be embedded in the body of a web page along with the script, as can be seen in the demo page's source.

  • Profile Image

    Answered by frcr_sg on January 01, 2014 at 07:51 AM
    thank ;-) nice
    Can the script be embedded within the jotform , or
    it can only be written into form at level of the hosting website ??
    or
    What is the best way to do the form with this script ??
    Thank.
    taking a bit of time to digest this ..;-)
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 01, 2014 at 08:30 AM

    Hello frcr_sg,

    Unfortunately, custom script cannot be uploaded in the JotForm editor. You will have to download your form's source code, add the custom script and host the file yourself in your own server.

    Once the form with custom code is uploaded on your server, you can use the file URL to access your form or use it to embed it in one of your web page.

    Do get back to us if you have any questions on this.

    Thank you!

  • Profile Image

    Answered by nicola1705 on April 30, 2014 at 01:38 AM

    I would like to set a Date field equal to another Date field when the condition of a textbox is met. For example: I have a textbox where an integer is typed, to toAdress field is hidden until the textbox int value is more than one. but if it is one it should be equal to the visible date field?

  • Profile Image

    Answered by nicola1705 on April 30, 2014 at 01:41 AM

    Do anyone have a script that can do this and how can i embed this script in the website that uses my form. it is html