Dynamically Created Anchor HREFs

Back in the day, namely before Javascript and jQuery were really a thing, the idea of dynamically creating an anchor's HREF attribute required some serious magic and behind-the-scenes wizardry. Or something like Flash. Those were not the days...

A Bit of Background

Several years ago, during a client's web app rebuild/refresh, I decided to clean up some of the gnarly baggage behind their reporting mechanism.

They had a (rapidly growing) set of "canned reports," each of which at the time was a direct, hard link to a specific script which was tailored to generate exactly the sort of dataset—no more, no less. As I went forward to generalize this behavior and thus save Future Me from a lot of unnecessary maintenance work, it became necessary to pass arguments to the report processing mechanism. No big deal, really, at the time. The links themselves were still relatively static and simply included $_GET (or sometimes $_POST) arguments to a URL, like ?number=2&order=asc&period=2019.

Fast forward a few years, and we added some dynamic variables (drop-down selects, date range selection, and several other required or optional variables. This change required a much more dynamic way of generating the HREFs to include the necessary values at the time of click.

The Setup:

Let's assume for this example that we have a select for the period (year) a select for some other subset of data, and a binary checkbox.

The link in question needs to include $_GET arguments for up to all four of these values, with the period being required, for example:

<a href="/path/to/reporting/mechanism.php?period=2019&pgrm=test&inclInactive=y">Generate Dataset!</a>

jQuery to the Rescue!

By using a bit of jQuery to dynamically build the HREF from a base path and set the HREF, the user is able to change their options on the fly and generate new datasets without ever having to effectively reload a page. Win!

We first change our anchor to something more basic, without an active HREF:

<a id="generateDataset" href="" baseref="/path/to/reporting/mechanism.php?period=">Generate Dataset!</a>

We keep the stub for period in the base URL, since it's required. We'll just append the year value first in processing in the jQuery below:

$("#generateDataset").click(function() {
	var baseref = $(this).attr("baseref");
	var year = $("#period").val();
	var program = "&pgrm=" + $("#program").val();
	var active = '';
	if ($("#inclInactive").prop('checked')) {
		active + "&inclInactive=y";
	} else {
		active + "&inclInactive=n";
	}
	baseref = baseref + year + program + active;
	$(this).attr("href", baseref);
});

The Output

Assuming the user has Javascript enabled and all of the values are properly selected (input validation, sanitization, and so forth are assumed to be in place for a production system), the user, on click should be redirected to the dynamically generated HREF. If Javascript isn't enabled, the page would just reload (since the HREF is blank by default).

Use Cases and Considerations

There are a number of ways this can be used in addition to dynamically generated HREFs. What's not shown in this example is the pre- and post-processing of input variables (to prevent Bad Things). In my production systems where these sort of things are being used, I have input validation on the client side along with server-side input sanitization and cleaning. Don't let bad people do simple things with your scripts to do Bad Things. Sanitize thy inputs!

Being a super simple way to do some dynamic magic, I have found this mechanism to be a lifesaver in a number of different ways! Be creative, and good luck!

Headline image courtesy Pixabay