HTML Data Attributes, JavaScript, and Databases

HTML data attributes are one of the neat features of HTML5 that give us a lot of flexibility.

HTML Data Attributes to save information to the database

We can use them for a variety of things (and abused for just as much), but the general idea behind the attribute, according to MDN, is this:

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or setUserData.

Yes, it reads a bit long. Consider it like this, though:

Data attributes provide a way to save extra information about an element in a semantic way without using conventional hacks (that so many of us are used to using).

Though there are a variety of ways in which this attribute can be used, I’ve found it to be useful when working with a front-end element that’s part of a dynamic set of larger elements.

Further, any one of these elements will be used via JavaScript to send data to the server via Ajax.

Here’s a simple example of how to use the HTML data attributes and Ajax.

HTML Data Attributes and Ajax

As with the majority of the content of this site, the examples will are done so within the context of WordPress, but the principles remain the same.

1. Starting with HTML

Let’s say that we have two types of input:

  1. A select element
  2. An input element

And let’s say that the first contains a set of default elements and the second is designed for the user to specify their own, custom content.

The markup might look something like this:

Everything looks like common HTML save for the data-type attribute which I’ve added. Here, one element holds the value of “default” and one element holds the value of “custom.”

2. Send It To The Server

For this example, let’s say that we’re going to take an element that has been chosen regardless of if it is a default option or a custom option and then send its value across the wire to the server.

Since we’re using the WordPress Ajax API, we’ll need to specify the method that we’re going to use and the data, and the type of data.

If we’re using a custom element, then the code may look like this:

Of course, this example is overly simplified.

The idea behind this is that, in a more elaborate case, you’ll have multiple elements of the default data-type and multiple elements of the custom data-type, you’ll need to traverse the set, and then build up a proper array or collection to send to the server.

But you get the idea, right?

In short, we collect a value and its data type into a JavaScript variable and then send it across the wire to the server. Notice in the callback function, we’re parsing the response as JSON.

I’ll show why I’m doing this in the following step.

3. Save It To The Database

Once we’re on the server, we can look at the incoming data, separate it by the data type (which will either be “default” or “custom”) and then add them to the appropriate record:

Once done, we can return a JSON response to the client-side containing what the database contains just in case we want to inspect it, display it, or something else.

Conclusion

Granted, this is a bit of a contrived example, but the point is that we can use a custom data attribute to store information about our elements and then use that to save it to the database.

In a more realistic case, you’ll need to collect a larger list of values and perhaps sort them by the data-type. A traditional iterator is likely not the best idea if there are a lot of elements. But I digress.

Nonetheless, the way we can specify information on the front-end, utilize it with JavaScript and handle it on the server persist.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.