Home | Forms | How to Conditionally Pre-Fill Forms

How to Conditionally Pre-Fill Forms

In previous blog posts, we have shown you examples of how to use JavaScript to apply conditional form logic and how to pre-fill hidden fields. Taking this concept one step further, we are going to pre-fill a hidden field based on the selection of the field before it.

In the example below, we want to select a teacher from a drop-down list and based on that selection, automatically update another field with a set value.

Note: This is an example, and any code will need to be modified for your requirements by a web developer.

This previous blog post shows how to retrieve the unique ID for each form field, which you will need for every field that the code is referencing.

SCENARIO:

We want to collect information based on a selection on a different form field without manually filling out that form field.

EXAMPLE:

Since it would not be possible to show the hidden field value being updated, I have modified the parameters of the example to use a read-only text field instead. This basic form shows the Teacher Code field being updated:

Louella gif 1 august post

 

SOLUTION:

We will use an event trigger in jQuery in order to populate the field based on the selection in the drop-down list. This allows you to simultaneously collect information using a hidden field and have the value in that field update to a corresponding value.

1. Use the form designer to create a form. I’ve added fields for First Name, Last Name, Email Address and Teacher, as well as the Teacher Code field, which will be automatically populated.

Note that the options in the Teacher field have different values and labels. Take the Values field option into account since that is what we will be using in our JavaScript. (Note: Don’t forget to Publish Custom Fields if you’re using a custom field.)

We are also using a text field in lieu of a hidden field, since it is not possible to show the hidden field updating the information live. The text field is set to Read-only to show that it cannot be manually updated on the form.

2. Next, we need the IDs for both the Teacher field and the Teacher Code field. Click Embed and use the Embed as Link option for the page where the form is hosted. You can then view the HTML code and copy the IDs of the two fields. An easy way to do this without sifting through the source code is by using the browser’s code inspector. Select the Teacher field > Right-click > Inspect > copy the field ID from the code inspector (see the help guide for your specific browser for more details).

Blog_07Smaller

Here are the two different field IDs used in our example:

Field id 1 louella

Field id 2 louella

3. We then go back to the form builder and click on Code Editor. Here, we will insert some JavaScript.

4. Below is an example of the JavaScript you will want to insert.

Don’t forget to start your jQuery custom script with clickd_jquery(document).ready(function(){ //code goes here }); so nothing is applied before the page finishes loading. The rest of the code will be inside this function.

The .change() method in the jQuery API allows us to apply logic that says “if the user selects the Teacher field, update the Teacher Code field.”

Teacher code field louella

We follow this logic by adding conditional “if” statements. The code snippet above states that if Ms. Norbury is selected in the Teacher field, update the value of the Teacher Code field to 01. Earlier, we highlighted using the stored values in the Value field. We’ll need to use these values stored in the Value field, not the Label, in order for the code to execute. The text in the Label field simply dictates what will be displayed on the form itself.

In order to account for the other values in the Teacher field, we will add additional “else/if”┬ástatements.
Else if statements louella

Lastly, we also want to account for any other value not listed above. In this example, the only other option not accounted for is if there is no selected answer. We will use an “else” statement to say that if no option is selected in the Teacher field, the Teacher Code field will be updated with the value null.

Teacher value louella

Once the changes in the Code Editor and the Form Builder are saved, the form will be ready to go!

Before launching it live, take note of these other considerations:

– Do not set any of the invisible fields as required inside the editor, or your customers will not be able to submit the form.

– If you are embedding your form into a web page using a widget, you will need to insert the JavaScript code directly into the HTML of your page (with the widget code), not into the code editor. Remember to include the <script> tags:

Script tags louella

You can test the form and see it live in action by following this link.

 

2017-05-24T19:27:19+00:00 By |Forms|0 Comments

About the Author:

mm
Louella Lugo is a Lead Marketing Success Manager at ClickDimensions.

Leave A Comment