Generic selectors
Exact matches only
Search in title
Search in content

JS tips – How to pass an input from one field to another in the same form

There are cases when you might want to pass the value/input from one field to another, within the same form. Read below to learn how to achieve that by using a script added to your 123FormBuilder form.

In order to use on your own form the scripts examples we provide below paste the URL containing the script file into the Advanced -> Form ->  Add a JS script to your form option. See our documentation on how to add JS to your form here.


Pass input between fields of the same type

This script will pass a field’s value to another field of the same type. It will work for input fields (Short answer, Email field, etc), as well as for choice fields (Single Choice, Dropdown etc).

(function(){
window.addEventListener('load', function(){
	var sourceControlId = 000000000, /** ID OF THE SENDER CONTROL **/
	targetControlId = 000000000, /** 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() );
});
})();

See how it works:

And yes, it works for choice fields too! See below:

What you need to do

You will need to replace the “00000000” from the script example above, with the IDs of your own fields. The first 0000000 will be replaced with the ID of the field from which the information will be copied. The second 0000000 will be replaced with the ID of the field to which information will be passed.

In order to find the ID of a field, right click on the field and use the Inspect option of your browser.

Tip: Copy and paste this script, in the same .js file, as many times as needed for each pair of fields on your form. Just make sure to always replace the field IDs with the ones of your fields.


Pass values between different field types

This script will allow you to pass an input/value from one field type to another. For example, pass from a Dropdown field to a Short answer field, from a Short answer field to a Long answer field, etc. Keep in mind that it does not work for any field types combinations.

(function(){
window.addEventListener('load', function(){
	var sourceControlId = 000000000, /** THE ID OF THE SENDER CONTROL */
	targetControlId = 000000000, /** 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)
	)

	);
});
})();

See how it works:

The same instructions as above apply.


Pass multiple values into a field/ Concatenate inputs from different fields

This script helps you collect values from different fields and put them together in a “summary” field (such as a Long answer field). It is very versatile and we will explain below how to customize it for your needs.

function joinValues() {
setTimeout(function() {
	var valueOne = loader.engine.document.getElementById(000000000).getProperty('value.value');
	var valueTwo = loader.engine.document.getElementById(111111111).getProperty('value.value');
	var valueThree = loader.engine.document.getElementById(222222222).getProperty('value.value'); //repeat the last line as many more times as needed ...

const joinedValues = valueOne + ": " + valueTwo + " - " + valueThree ;
		   loader.engine.document.getElementById(XXXXXXXX).setValue(({"value": joinedValues}));
}, 1000);
}

window.onchange = joinValues;

Here is a demo for an order form where we applied the script from above:

How to customize the script

The script has a few lines which are repeated, but on each line the “var” has a different name (valueOne, valueTwo, etc). You will need as many of those lines as fields you want to send data from. In our case, we repeated them three times, up to “valueThree”, because in our example above we have 3 fields from which we gather data. For a fourth field, add another line, right below the “var valueThree” one. You will change the name of the var to “valueFour” and so on.

For each of these lines, you will add the corresponding field’s ID. Therefore, 00000000 will be replaced with the ID of your first field, 11111111 will be replaced with the ID of your second field and so on.

Replace the “XXXXXXX” value with the ID of the field where you want to combine all the information (ideally a Long answer field).

const joinedValues = valueOne + “: ” + valueTwo + ” – ” + valueThree; – this is the line where we combine the information from all fields. In between quotation marks add any symbols or words that you need to separate the inputs. Make sure to add spaces too because with no space the inputs will print as this: valueOnevalueTwovalueThree

Tip

While the JS method works greatly when you need to transfer information from just a few fields into other, for a larger number of fields we recommend you to use our Database Manager app, available from the Enterprise plan. Using this app is possible to also prefill form fields with values from your own database (MySQL or Maria DB) or from a CSV file into form fields.

Do you have other code examples you tried and would like to share with us in the comments below?

See more JS tips articles:

Leave a Reply

Your email address will not be published.

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?