Bookmarklet to Grab Query String Data

I was working on a horribly tedious project that required copying and pasting URLs into a form then submitting it and waiting for a new URL — over a hundred times. This type of mind-numbing repetition kills the spirit, so I avoid it whenever possible. Sadly, in this case, it was unavoidable.

Each text input on the form I was required to use had an ID and I had the values to paste into them stored in a list, so I just needed to come up with a way of generating links to something that would populate the fields.

Because I had no control over the form itself, I needed to come up with something external to the page. That’s where I got the idea for the bookmarklet. With it, I could pass the values I needed into the form’s query string (by generating a big list of links to the form’s URL with the various query strings), and then move the data into the correct fields by clicking on the bookmark in my browser. It wasn’t completely automated, but it was a huge improvement over manually copying and pasting each field.

I did the tough part already: writing the JavaScript code that grabs all the parameters from the query string and places their data into the text fields. All you have to do is copy it:

Paste that into your browser as the URL of a new bookmark. In Chrome, that looks like this:

adding the bookmarklet into Chrome

Then, simply navigate to the form you want to auto-populate with the data added to the query string, and click on your new bookmark. The data will get pulled into all the text fields.

Let’s try an example. But first, we need add some data to our query string. Click here to do that.

Let’s try an example. I have two text fields below, example1 and example2. If you created the bookmarklet, just click on it and watch it fill in the fields:



Pretty cool, huh?

I’ve tested this in Chrome 63, Firefox 58, and Safari 10. It might work in other browsers, it might not. Because it’s something that you’re using on your own computer, you don’t have to worry about it being compatible with every browser and device.

Note: If the form you’re trying to update is within an iFrame, you’ll have to adjust the code a bit. This article on getting access to iFrame elements with JavaScript will explain more.


Comments

Loading…

This post was published on March 20th, 2018 by Robert James Reese in JavaScript Before using any of the code or other content in this post, you must read and agree to our terms of use.