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\u00a0and 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.<\/p>\n
This being said, I’m going to use 123FormBuilder in both my tutorials since it’s a web form builder<\/a> that anyone can use easily for creating web forms<\/a> within minutes.<\/p>\n 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.<\/p>\n If you are new to JavaScript or don\u2019t have many technical skills, you don\u2019t need to worry. I’m going to guide you through the process.<\/p>\n 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<\/strong> web form, you\u2019ll need to enable the JavaScript feature on your form, which is located in the Advanced<\/strong> section, and use a JavaScript snippet.<\/p>\n Note<\/b>: To enable custom JS on your form, you’ll need the Platinum<\/b> subscription.<\/p>\n Step 1. Create Your JavaScript file<\/b> When you want to pass value between fields of the same type<\/strong>, open\u00a0your notepad and copy the code provided below:<\/p>\n When you want to pass value between fields of different types<\/strong>, open\u00a0your notepad and copy the code provided below:<\/p>\n 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.<\/p>\n Basically, what you need to keep in mind is the following:<\/p>\n Replace\u00a034743361, respectively\u00a034743365 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).<\/p>\n The same rule applies to the script designated for value transfer between fields of the same type.<\/p>\n To find out what your source field ID and target field ID are<\/strong>, you will first have to enable developer tools in your browser. You can check on how to do this on Google Chrome<\/a>, Mozilla Firefox<\/a>, Safari<\/a>, Opera<\/a> and IE<\/a>.<\/p>\n Next<\/strong>, 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.<\/p>\n Look for the input<\/strong> tag and copy the field ID that appears after \u201ccontrol\u201d.<\/p>\n Now get back to your notepad where the JavaScript code is located. Add your field ID by replacing the old one within the function:<\/p>\n Do the same for the second function, but replace the ID with that of the second field, instead.<\/p>\n Finally, save<\/strong> 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<\/strong> If you don\u2019t have a server where you can upload the JS file, try GitHub<\/a>. 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.<\/p>\n Important<\/b>: The URL of your Javascript file must be hosted on a secure (HTTPS) environment.<\/p>\n There’s a Javascript snippet for everything, but here you can use 123FormBuilder’s built-in variables redirect<\/b> option. So, instead of using JavaScript again, follow these steps:<\/p>\n Note:<\/b> You cannot pass uploaded files, single or multiple field selections, likert scale values or phone field values with customVars<\/li>\n For additional help, feel free to browse our documentation<\/a> or contact our customer care agents.<\/p>\nWhat is JavaScript?<\/h2>\n
How to Pass Value From One Field to Another Field Within the Same Form?<\/h2>\n
\nThere are two types of JavaScript code you can use here:<\/p>\n\n
\"(function(){\r\n\r\nwindow.addEventListener('load', function(){\r\n\r\nvar sourceControlId = 41171190, \/** THE ID OF THE SENDER CONTROL *\/\r\n\r\ntargetControlId = 41171191, \/** THE ID OF THE RECEIVER CONTROL **\/\r\n\r\nsourceControlInstance = loader.getEngine().getDocument().getElementById(sourceControlId),\r\n\r\ntargetControlInstance = loader.getEngine().getDocument().getElementById(targetControlId);\r\n\r\nsourceControlInstance.on('value-change', function(){\r\n\r\ntargetControlInstance.setValue( sourceControlInstance.getValue() );\r\n\r\n});\r\n\r\ntargetControlInstance.setValue( sourceControlInstance.getValue() );\r\n\r\n});\r\n\r\n})();\"\u00a0\r\n\r\n\r\n<\/pre>\n<\/pre>\n
\"(function(){\r\n\r\nwindow.addEventListener('load', function(){\r\n\r\nvar sourceControlId = 34743361, \/** THE ID OF THE SENDER CONTROL *\/\r\n\r\ntargetControlId = 34743365, \/** THE ID OF THE RECEIVER CONTROL **\/\r\n\r\ndomAbstractionLayer = loader.getDOMAbstractionLayer(),\r\n\r\nsourceControlInstance = loader.getEngine().getDocument().getElementById(sourceControlId);\r\n\r\nsourceControlInstance.on('value-change', function(){\r\n\r\ndomAbstractionLayer.setControlValueById(\r\n\r\nString(targetControlId),\r\n\r\ndomAbstractionLayer.getControlValueById(\r\n\r\nString(sourceControlId)\r\n\r\n)\r\n\r\n);\r\n\r\n});\r\n\r\ndomAbstractionLayer.setControlValueById(\r\n\r\nString(targetControlId),\r\n\r\ndomAbstractionLayer.getControlValueById(\r\n\r\nString(sourceControlId)\r\n\r\n)\r\n\r\n);\r\n\r\n});\r\n\r\n})();\"<\/pre>\n\n
![\"using](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/inspect-web-form-fields.png\" "\\"Use")
<\/p>\n![\"pass](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/form-field-input-id.png\" "\\"Inspect")
<\/p>\ndemo123CF_CopyFieldValue.setFieldOriginID('field input ID goes here'); \r\n<\/pre>\ndemo123CF_CopyFieldValue.setFieldDestinationID('field input ID goes here');\r\n<\/pre>\n
\nStep 2. Apply The JavaScript On The Form<\/strong>
\nAt 123FormBuilder, in order to add a custom JavaScript to your web form, you will need to go the Settings \u2192 Advanced<\/strong> section and click the Form<\/strong> tab. There, tick the option Add a JS script to your form<\/strong> and provide the URL of your script.<\/p>\n![\"passing](\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/add-js-url-to-form.png\" "\\"Add")
<\/p>\nHow to Pass Value From One Form To Another Form?<\/h2>\n
\n
\n
\n
\nHere’s an example: \/\/www.123formbuilder.com\/sf.php?s=form-222222&customVars123=yes&control2323232=request1212121<\/p>\n\n