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 123FormBuilder and following this tutorial. The other scenario can also be done with 123FormBuilder, 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 123FormBuilder in both my tutorials since it’s a web form builder that anyone can use easily for creating web forms within minutes.
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 123FormBuilder 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.
Look for the input tag and copy the field ID that appears after “control”.
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 123FormBuilder, 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.
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 123FormBuilder.
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 123FormBuilder’s built-in variables redirect option. So, instead of using JavaScript again, follow these steps:
-
- In your web form’s settings on 123FormBuilder, go to the Settings → Thank You Page and Redirects section and select the option Redirect with custom variables.
- 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 Publish – Link 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
- 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.
Load more...