Passing an Option in Query String and Setting Select Value

Overview

Formidable provides a built-in method for setting a default value on fields by passing a query string parameter. To do this, simply pass the name of the parameter and its value in the query string, like this:

/page-name/?color=blue

If you want to capture the value of "blue" as the default value in a field, you add the [get param=color] shortcode to the Default Value field on the field's Advanced panel as in this example:

To see this work, click on any of these links to refresh this page and see the values change in the form's fields:

The dropdown, checkboxes, and radio buttons are setup to use separate values. It works equally well even if you're not using separate values. Nice, right?!

The Problem

This works because we're passing a value to the various fields and the default value is populated with [get param], but what if you're using separate values and want to pass the field option instead of a value?

Well, Formidable doesn't have a shortcode for receiving an option as a default value, so [get param] is not going to work unless the option and value are spelled identically, which kind of defeats the purpose for using separate values, right? If this is you're requirement, you have to resort to old reliable jQuery.

The Solution

This form uses jQuery to read the option value, then set the selected value to the corresponding value. It is a duplicate of the above form except that we've removed the [get param] from the dropdown, checkboxes, and radio button fields. We've left the [get param] in place for the text and paragraph fields, but changed the parameter name from color to my_option. Again, you can click the links to refresh this page and watch the form function.

The jQuery

Here's the jQuery that makes the second form work:

Let's walk through this code so you have a better understanding of why it works. It is divided into two sections.

First Part

The first part is a declaration for the getParameterByName function. This function accepts 2 parameters: name and url. The name parameter is the name of the query string parameter for which you want to retrieve its value.

The url parameter is any url you pass to the function. If no url is passed as a parameter, the function defaults to the current page url. This function is critical for the rest of the code to work.

Second Part

The next part is an auto-executing function that runs as soon as the page is loaded and ready. The first thing it does is retrieve the current url to pass to getParameterByName, but before it calls getParameterByName, the if statement checks to make sure the target parameter is part of the url string.

Next we get the query string value.

The following three short code blocks are examples of using the option name to populate the value of the dropdown, radio buttons, and checkboxes in that order.

One important thing to note, we are using the field's name as the jQuery selector. Formidable generates the select and radio button field names as item_meta[field_id]. Checkboxes are item_meta[field_id][]. You can also view the field names in your browser's inspection tool.

Last, if you're not sure where to put the jQuery script, it goes in the After Fields section on the form's Customize HTML page.