[HOW-TO] Pre-Fill Radio & Checkbox Fields with URL parameters

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”)

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

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

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

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(el[0]),  
        elVal = el.length > 1 ? decodeURIComponent(el[1]) : null;
        if (!(elName in dataObj)) {
            dataObj[elName] = [];
        }
        dataObj[elName].push(elVal);
    });
    (":input").each(function () {
        if (!((this).attr("name") in dataObj)) {
            this.checked = false;
        }
    });
    $.each(dataObj, function (i, val) {
        $("[name='" + i + "']").val(val);
    });
</script>

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(el[0]),
                    elVal = el.length > 1 ? decodeURIComponent(el[1]) : null;
                if (!(elName in dataObj)) {
                    dataObj[elName] = [];
                }
                dataObj[elName].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)