Auto-select form checkbox with querystrings

Published: 2019-11-18 06:10 |

Category: Code | Tags: clipboard, dev, functions, javascript, professional development, update, usability

I maintain a website at school where teachers can register for professional development. They can see all offerings and save sessions to their profile for remidners, etc.

The bulk of the data comes through Javascript, which populates the main page in a fancily-styled form. Each course is a form element with a unique ID that is passed to the backend when they register. The database stores the user ID and the course ID in a couple different places to manage all the reminders.

Because each course is a JSON object, you cannot just send a link for a specific course, which is a problem when you sometimes have dozens on the screen. That means they're either having to remember to search (which matches titles) or scroll until they find the right session. Coordinating a group of people becomes difficult.

Since each of my form elements has a specific ID, I decided to use a URL query to automatically select the correct element. I can also build a specific URL for each session and add it to the element when it's built on the page. Double win. Here's how it works.


You can call to pull any query parameters from a URL (anything after a ? character). The browser also has a handy URLSearchParams function that allows you use methods like .has() and .get() to make them more accessible in the code. With some Javascript, I can pull the keys from the URL when the page loads and then kick off another action.

I want to pass a specific course ID to the querystring for the user. So, my URL becomes:

Acting on the query

The normal page load scripts didn't need to change much. I added a quick conditional to check if the URL included a query string with the .has() method I mentioned above. I can specify which key to look for, which makes extending this function easier in the future.

if (urlParams.has('course')) {
        // If the query matches the course being built, select the input
        if (urlParams.get('course') === course.key) {
            document.querySelector(`input[name='course'][value='${course.key}']`).checked = true;

            // The page can get long, so I focus the window on the specific course.
            window.location.hash = `#${course.key}`;

            // set the submit badge quantity


If a query is passed in the URL, that course gets a checkbox pre-selected and focused on the screen for the user. They're free to either select more courses or just hit sbumit and be on their way.

Comments are always open. You can get in touch by sending me an email at