How to Pass Value From One Form Field To Another Using JavaScript

(Updated 12/19/2019)

There are two scenarios where you want to pass value from one field to another:

  • Pass value from one field to another within the same form
  • Pass value from one form to another form

Both of these scenarios require JavaScript experience, however, one of them can be achieved easily without coding anything by building your online form with the 123 Form Builder tool and following the tutorial from this article. The other scenario can also be done with our form builder, but by following a workaround that needs a bit of JavaScript knowledge. Luckily for you, I’ve included the steps below.

This being said, I’m going to use 123 Form Builder in both my tutorials since it’s a web form builder that anyone can use easily for creating web forms within minutes.

Get Your Versatile Form Builder Here

What is JavaScript?

JavaScript can be used in many ways on your forms to extend their capabilities and control interactions. The possibilities are endless and with the invention of TypeScript, there’s no telling how far we can go with creating high-engaging web forms.

If you are new to JavaScript or don’t have many technical skills, you don’t need to worry. I’m going to guide you through the process.

How to Pass Value From One Field to Another Field Within the Same Form?

What do we want to achieve here? Well, if someone starts completing the online form and gets to fill a particular field, the input will be automatically copied to another field. This works great for forms where the user has to provide the same information more than once. To achieve this with a 123 Form Builder web form, you’ll need to enable the JavaScript feature on your form, which is located in the Advanced section, and use a JavaScript snippet.

Note: To enable custom JS on your form, you’ll need the Platinum subscription.

Step 1. Create Your JavaScript file
There are two types of JavaScript code you can use here:

  • the script you use when you want to pass value from one field to another and they are of the same type;
  • the script you use when you want to pass field value from one field to another and they are of different types.

When you want to pass value between fields of the same type, open your notepad and copy the code provided below:

"(function(){

window.addEventListener('load', function(){

var sourceControlId = 41171190, /** THE ID OF THE SENDER CONTROL */

targetControlId = 41171191, /** THE ID OF THE RECEIVER CONTROL **/

sourceControlInstance = loader.getEngine().getDocument().getElementById(sourceControlId),

targetControlInstance = loader.getEngine().getDocument().getElementById(targetControlId);

sourceControlInstance.on('value-change', function(){

targetControlInstance.setValue( sourceControlInstance.getValue() );

});

targetControlInstance.setValue( sourceControlInstance.getValue() );

});

})();" 


 

When you want to pass value between fields of different types, open your notepad and copy the code provided below:

"(function(){

window.addEventListener('load', function(){

var sourceControlId = 34743361, /** THE ID OF THE SENDER CONTROL */

targetControlId = 34743365, /** THE ID OF THE RECEIVER CONTROL **/

domAbstractionLayer = loader.getDOMAbstractionLayer(),

sourceControlInstance = loader.getEngine().getDocument().getElementById(sourceControlId);

sourceControlInstance.on('value-change', function(){

domAbstractionLayer.setControlValueById(

String(targetControlId),

domAbstractionLayer.getControlValueById(

String(sourceControlId)

)

);

});

domAbstractionLayer.setControlValueById(

String(targetControlId),

domAbstractionLayer.getControlValueById(

String(sourceControlId)

)

);

});

})();"

Now you will need to adjust the code a bit. You will need the ID of the field from where you are going to pass its input value and the ID of the field where the input value is passed.

Basically, what you need to keep in mind is the following:

  • sourceControlInstance is where your source field ID should go
  • targetControlId is where your target field ID should go

Replace 34743361, respectively 34743365 in the third and fourth lines of the code with your source field ID(the field from which you want to pass value), respectively with your target field ID (the field into which you want the value to be passed).

The same rule applies to the script designated for value transfer between fields of the same type.

To find out what your source field ID and target field ID are, you will first have to enable developer tools in your browser. You can check on how to do this on Google Chrome, Mozilla Firefox, Safari, Opera and IE.

Next, view your online form from a visitor’s perspective and right-click the field input from where you want to pass its value. An option that allows you to inspect elements should appear in the context menu. Click it to continue.

Web Forms

Look for the input tag and copy the field ID that appears after “control”.

form field

Now get back to your notepad where the JavaScript code is located. Add your field ID by replacing the old one within the function:

demo123CF_CopyFieldValue.setFieldOriginID('field input ID goes here'); 

Do the same for the second function, but replace the ID with that of the second field, instead.

demo123CF_CopyFieldValue.setFieldDestinationID('field input ID goes here');

Finally, save your notepad document as a JavaScript file. You can do this easily by providing the .js extension next to the name. For example passvalue.js
Step 2. Apply The JavaScript On The Form
At 123 Form Builder, in order to add a custom JavaScript to your web form, you will need to go the Settings → Advanced section and click the Form tab. There, tick the option Add a JS script to your form and provide the URL of your script.

add js url to form

If you don’t have a server where you can upload the JS file, try GitHub. It’s a free hosting platform for developers where they can upload all sorts of scripts. Create an account on GitHUb and upload your .js file there. Obtain the URL to your script and provide it in the JS URL box on 123 Form Builder.

Important: The URL of your Javascript file must be hosted on a secure (HTTPS) environment.

How to Pass Value From One Form To Another Form?

There’s a Javascript snippet for everything, but here you can use 123 Form Builder’s built-in variables redirect option. So, instead of using JavaScript again, follow these steps:

    1. In your web form’s settings on 123 Form Builder, go to the SettingsThank You Page and Redirects section and select the option Redirect with custom variables.

 

  1. Build your custom URL of your first form (so the one from where you want to pass value from).
    Here’s an example: //www.123formbuilder.com/sf.php?s=form-222222&customVars123=yes&control2323232=request1212121
    • form-222222 represents your form ID (see it in the PublishLink section).
    • customerVars123 is a constant. Nothing to change here.
    • control2323232 is the ID of the field where the value will be passed to.
    • request1212121 is the ID of the field from you where you pass the value.

    Note: You cannot pass uploaded files, single or multiple field selections, likert scale values or phone field values with customVars

  2. Now, when publishing your form, use the customVars link instead of the standard one. And that’s about it.

For additional help, feel free to browse our documentation or contact our customer care agents.

Also, if you're looking for a form builder and data management tool wrapped into one place, try 123 Form Builder for free.

Beginner or Advanced, This Form Builder’s For You