{"id":43640,"date":"2022-07-08T14:37:07","date_gmt":"2022-07-08T14:37:07","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=43640"},"modified":"2024-04-19T13:47:13","modified_gmt":"2024-04-19T13:47:13","slug":"js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/","title":{"rendered":"JS tips &#8211; How to pass an input from one field to another in the same form"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>In order to use on your own form the scripts examples we provide below paste the URL containing the script file into the <strong>Advanced -&gt; Form -&gt; &nbsp;<em>Add a JS script to your form<\/em> <\/strong>option.&nbsp;See our documentation on how to add JS to your form&nbsp;<a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-custom-js-script-to-my-form\/\">here.<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-pass-input-between-fields-of-the-same-type\">Pass input between fields of the same type<\/h2>\n\n\n\n<p>This script will pass a field&#8217;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).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function(){\nwindow.addEventListener('load', function(){\n\tvar sourceControlId = 000000000, \/** ID OF THE SENDER CONTROL **\/\n\ttargetControlId = 000000000, \/** ID OF THE RECEIVER CONTROL **\/\n\n\tsourceControlInstance = loader.getEngine().getDocument().getElementById(sourceControlId),\n\ttargetControlInstance = loader.getEngine().getDocument().getElementById(targetControlId);\n\n\tsourceControlInstance.on('value-change', function(){\n\t\ttargetControlInstance.setValue( sourceControlInstance.getValue() );\n\t});\n\n\ttargetControlInstance.setValue( sourceControlInstance.getValue() );\n});\n})();<\/code><\/pre>\n\n\n\n<p>See how it works:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/demoScriptInputSameTypeFields.mp4\"><\/video><\/figure>\n\n\n\n<p>And yes, it works for choice fields too! See below:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/demoScriptPassInputChoiceFields.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>What you need to do<\/strong><\/p>\n\n\n\n<p>You will need to replace the &#8220;00000000&#8221; 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. <\/p>\n\n\n\n<p>In order to<strong> find the ID of a field<\/strong>, right click on the field and use the<strong> Inspect<\/strong> option of your browser.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/howToFindFieldID.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Tip:<\/strong> 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. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Pass values between different field types<\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function(){\nwindow.addEventListener('load', function(){\n\tvar sourceControlId = 000000000, \/** THE ID OF THE SENDER CONTROL *\/\n\ttargetControlId = 000000000, \/** THE ID OF THE RECEIVER CONTROL **\/\n\n\tdomAbstractionLayer = loader.getDOMAbstractionLayer(),\n\tsourceControlInstance = loader.getEngine().getDocument().getElementById(sourceControlId);\n\n\tsourceControlInstance.on('value-change', function(){\n\t\tdomAbstractionLayer.setControlValueById(\n\t\tString(targetControlId),\n\t\tdomAbstractionLayer.getControlValueById(\n\t\tString(sourceControlId)\n\t\t)\n\t\t);\n\t});\n\n\tdomAbstractionLayer.setControlValueById(\n\tString(targetControlId),\n\tdomAbstractionLayer.getControlValueById(\n\tString(sourceControlId)\n\t)\n\n\t);\n});\n})();<\/code><\/pre>\n\n\n\n<p>See how it works:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/demoPassInputDifferentFields.mp4\"><\/video><\/figure>\n\n\n\n<p>The same instructions as above apply.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Pass multiple values into a field\/ Concatenate inputs from different fields<\/h2>\n\n\n\n<p>This script helps you collect values from different fields and put them together in a &#8220;summary&#8221; field (such as a Long answer field). It is very versatile and we will explain below how to customize it for your needs.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function joinValues() {\nsetTimeout(function() {\n\tvar valueOne = loader.engine.document.getElementById(000000000).getProperty('value.value');\n\tvar valueTwo = loader.engine.document.getElementById(111111111).getProperty('value.value');\n\tvar valueThree = loader.engine.document.getElementById(222222222).getProperty('value.value'); \/\/repeat the last line as many more times as needed ...\n\nconst joinedValues = valueOne + \": \" + valueTwo + \" - \" + valueThree ;\n\t\t   loader.engine.document.getElementById(XXXXXXXX).setValue(({\"value\": joinedValues}));\n}, 1000);\n}\n\nwindow.onchange = joinValues;<\/code><\/pre>\n\n\n\n<p>Here is a demo for an order form where we applied the script from above:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/demoConcatenateValuesOrderForm.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>How to customize the script<\/strong><\/p>\n\n\n\n<p>The script has a few lines which are repeated, but on each line the &#8220;var&#8221; 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 &#8220;valueThree&#8221;, because in our example above we have 3 fields from which we gather data. For a fourth field, add another line, right below the &#8220;var valueThree&#8221; one.  You will change the name of the var to &#8220;valueFour&#8221; and so on. <\/p>\n\n\n\n<p>For each of these lines, you will add the corresponding field&#8217;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. <\/p>\n\n\n\n<p>Replace the &#8220;XXXXXXX&#8221; value with the ID of the field where you want to combine all the information (ideally a Long answer field). <\/p>\n\n\n\n<p><em>const joinedValues = valueOne + &#8220;: &#8221; + valueTwo + &#8221; &#8211; &#8221; + valueThree;<\/em> &#8211; 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<\/p>\n\n\n\n<div class=\"warningBox\"><span style=\"font-size: 16px\"><p><b>Tip<\/b><\/p>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 <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-connect-forms-with-your-own-database\/\"> Database Manager<\/a> 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.  <\/span><\/div>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Do you have other code examples you tried and would like to share with us in the comments below? <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><b>See more JS tips articles:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/\">Pass UTM parameters from URL to form fields<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-round-a-number\/\">Round fractional numbers<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[93,3],"tags":[156,155],"class_list":["post-43640","post","type-post","status-publish","format-standard","hentry","category-advanced","category-documentation","tag-js","tag-script"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to pass input from one field to another in the same form<\/title>\n<meta name=\"description\" content=\"There are cases when you need to pass the value from one field to another. Read on to learn how to achieve it on your 123FormBuilder form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JS tips - How to pass an input from one field to another in the same form\" \/>\n<meta property=\"og:description\" content=\"There are cases when you need to pass the value from one field to another. Read on to learn how to achieve it on your 123FormBuilder form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-08T14:37:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-19T13:47:13+00:00\" \/>\n<meta name=\"author\" content=\"Alexandra Cufteac\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexandra Cufteac\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to pass input from one field to another in the same form","description":"There are cases when you need to pass the value from one field to another. Read on to learn how to achieve it on your 123FormBuilder form.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/","og_locale":"en_US","og_type":"article","og_title":"JS tips - How to pass an input from one field to another in the same form","og_description":"There are cases when you need to pass the value from one field to another. Read on to learn how to achieve it on your 123FormBuilder form.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2022-07-08T14:37:07+00:00","article_modified_time":"2024-04-19T13:47:13+00:00","author":"Alexandra Cufteac","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alexandra Cufteac","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/"},"author":{"name":"Alexandra Cufteac","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/a06666451f3a2183ee005d82f917d6aa"},"headline":"JS tips &#8211; How to pass an input from one field to another in the same form","datePublished":"2022-07-08T14:37:07+00:00","dateModified":"2024-04-19T13:47:13+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/"},"wordCount":725,"commentCount":0,"keywords":["js","script"],"articleSection":["Advanced","Documentation"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/","name":"How to pass input from one field to another in the same form","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"datePublished":"2022-07-08T14:37:07+00:00","dateModified":"2024-04-19T13:47:13+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/a06666451f3a2183ee005d82f917d6aa"},"description":"There are cases when you need to pass the value from one field to another. Read on to learn how to achieve it on your 123FormBuilder form.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"JS tips &#8211; How to pass an input from one field to another in the same form"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/a06666451f3a2183ee005d82f917d6aa","name":"Alexandra Cufteac","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/aff6b9df250996a53212a23829abfa7e770f129d62867ed3bd56aee50333469b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAlexandra%2BCufteac%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/aff6b9df250996a53212a23829abfa7e770f129d62867ed3bd56aee50333469b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAlexandra%2BCufteac%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/aff6b9df250996a53212a23829abfa7e770f129d62867ed3bd56aee50333469b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAlexandra%2BCufteac%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"Alexandra Cufteac"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/alexandra-cufteac123formbuilder-com\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/43640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=43640"}],"version-history":[{"count":26,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/43640\/revisions"}],"predecessor-version":[{"id":48640,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/43640\/revisions\/48640"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=43640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=43640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=43640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}