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

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

See more JS tips articles:

• Pass UTM parameters from URL to form fields
• Round fractional numbers