A bit of clarification on point 4 since I can’t edit the above post:

• “radio_id” - It’s the name of the field(s) that you noted down in Step 2


• “desired_value” - It’s the name of the value you want pre-selected/checked

Also, the formatting of the script broke somehow when I was copy/pasting it.

Please change the first line from this:

](http://code.jquery.com/jquery-2.1.4.min.js"></script><script> “Link http//codejquerycom/jquery-214minjs223E3C/script3E3Cscript3E”)

Hristian - 

This is great. Hopefully, Justin will add it to his latest post. Can you point out a use case for pre-filled radio buttons? I have used pre-filled drop downs before but I rarely use radio buttons (check boxes even less frequently) but maybe I am overlooking a valuable resource.

Joe

Hey Joe,

I wrote the how-to based on a recent question here in the community but just a couple use cases off the top of my head:

• Registering a known lead for a new webinar. KissMetrics does something similar. The email campaign you send to your list would have a “tagged” URL which allows them to register for a new webinar in 2 clicks instead of 5,10, etc. 

You already have the information, so no reason to ask for it again. Unless, your lead needs to change something. 

• Adding a pre-checked checkbox along the lines of “It’s OK to contact me about X and Y” (You have to be careful with this one since US, Canada and EU countries all have different rules for implied consent, etc.)

Dropdowns can be a serious friction point on mobile devices and should be used as a last resort. 

So it might be worthwhile looking into alternative form fields. 

Best,

Hristian

This has come in handy so many times!!! Love it @Hristian 🙌

Hey @digibomb I’m happy that the script came in handy.

Any interesting implementations you can share with the community (just the general idea)?

@Hristian Best use I have had is when visitors are coming from email campaigns and we want specific boxes checked based on campaign. Specifically “sign me up for …” or “Send me incentives and promos …” etc. Also great for coupon related stuff and we want certain product boxes checked initially.

I have also used this in multi-step surveys when boxes are checked based on option selected in previous steps.

Those are just a few off the top of my head 🙂

This is great! I don’t get the instruction ’ Please change the first line from this:’ though. Which part should I copy to where and how does the entire script look like now?

@UnbounceTechTeam any idea? see the previous reply:

This is great! I don’t get the instruction ’ Please change the first line from this:’ though. Which part should I copy to where and how does the entire script look like now?

Here’s @Hristian’s code as I believe it was meant to be formatted. I also added the script start and end tags so you can easily copy and paste the entire block into a new Javascript. Make sure this script is loaded Before Body End Tag.

<script>

    src="http://code.jquery.com/jquery-2.1.4.min.js";

</script>

<script>

    var dataObj = {};

    var data = document.location.search.substr(1);



    $.each(data.split("&"), function () {

        var el = this.split("="), 

        elName = decodeURIComponent(elt0]),  

        elVal = el.length > 1 ? decodeURIComponent(elt1]) : null;

        if (!(elName in dataObj)) {

            dataObjaelName] = ]];

        }

        dataObjaelName].push(elVal);

    });

    (":input").each(function () {

        if (!((this).attr("name") in dataObj)) {

            this.checked = false;

        }

    });

    $.each(dataObj, function (i, val) {

        $(" name='" + i + "']").val(val);

    });

</script>

Thanks @Alex_Le, very much appreciate your help. I’ve tried to include your script but my page is still not loading the prefilled dropdown/radiobutton (see in bold). Here’s the link I’m trying to test on one of my pages:

freeviews.nl/meanail-kit-ruby-confirmation-page/i.html?first_name=FinalTest&last_name=Test&email=elvin@roekoo.nl&phone=0612345678&adres=lutmastr123&postcode=1234AB&woonplaats=Babylon&motivation=motivation_test&experience=experience_test&experience_details=experience_details_test&suitability=suitability_test&purchase_intention=purchase_intention_test&expectations=expectations_test&Agree_to_write=Nee%2C+niet+akkoord&product_variant=Rood&utm_source=mc&utm_medium=email&utm_campaign=20200630_polar&holiday=holiday_test&product1=MEANAIL+Kit+Ruby&product2=MEANAIL+6+kleuren+gel+nagellak

Any suggestions as to what I might be overlooking?

Hey Elvin,

First, I have to apologize since I should’ve tested Hrishan’s script myself before my post. After testing I noticed a few bugs in the reformat, which I’ve adjusted below with additional comments:

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"

        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">

        // Loads jQuery into the site. Insert this script tag into the head

    </script>



    <script>

        // Insert this script before body end tag

        $(document).ready(() => {

            var dataObj = {};

            var data = document.location.search.substr(1);



            // For each URI component, split into name and value and insert into dataObj object

            $.each(data.split("&"), function () {

                var el = this.split("="),

                    elName = decodeURIComponent(ele0]),

                    elVal = el.length > 1 ? decodeURIComponent(ele1]) : null;

                if (!(elName in dataObj)) {

                    dataObjaelName] = m];

                }

                dataObjaelName].push(elVal);

            });



            // Uncheck any boxes with names that were not included in the URL

            $(":input").each(function () {

                if (!($(this).attr("name") in dataObj)) {

                    this.checked = false;

                }

            });

            // For every key in dataObj, write its value or check a box if there is a form element with a name that matches

            $.each(dataObj, function (i, val) {

                $(" name='" + i + "']").val(val);

            });

        });

    </script>

This should work as intended to autofill checkboxes and radio buttons. As for your URL, are you trying to check multiple items at once with the Agree_to_write component? If so, the script might not work as intended and you may want to try loading them one at a time (eg. Agree_to_write=Nee&Agree_to_write=niet&Agree_to_write=akkoord)

Awesome Alex, it works!!! I appreciate your help so much, thanks!

As for the component, the answer is no; that was actually one option. But you did trigger me to check multiple options for the checkbox questions, see the example below.

Perfect, thanks!

freeviews.nl/product-confirmation-dior?first_name=FinalTest&last_name=Test&email=elvin@roekoo.nl&phone=0612345678&adres=lutmastr123&postcode=1234AB&woonplaats=Babylon&motivation=motivation_test&experience=experience_test&experience_details=experience_details_test&suitability=suitability_test&purchase_intention=purchase_intention_test&current_use=current_use_test&expectations=expectations_test&frequency=2+keer+per+week&requirements=Mascara&requirements=Eyeliner&agree_to_write=Nee%2C+niet+akkoord&agree_to_period=Nee%2C+niet+akkoord&agree_to_return=Nee%2C+niet+akkoord&agree_own_risk=Nee%2C+niet+akkoord&product_variant=Rood&utm_source=mc&utm_medium=email&utm_campaign=20200630_polar&holiday=holiday_test&product1=Diorshow%20Iconic%20Overcurl%20Mascara&product2=5%20Couleurs%20Couture%20Oogschaduwpalette