Save form state with localStorage

If you haven’t used JavaScript’s “localStorage” before – now’s the time to at least look at it.

It allows for some really simple data storage – in a way similar to cookies but much easier ( in my opinion ) to work with.

So adding an item to it is as simple as:

localStorage.setItem('checkbox-name', 'checked');

Retrieving the value, let’s say after a page refresh, is as simple as:

var checkbox_state = localStorage.getItem('checkbox-name');

Which brings us to the subject of this article.

Saving a form state

You can use the simple syntax above to store the state of a checkbox or any other input to avoid frustrating your website visitors.

I’ve found this very helpful in a cart-like page where users could select some options and further navigate the website before submitting.

Instead of having to create a back-end storage for a form state that would get discarded after submission if found it much more straight-forward to use localStorage.

Here some sample code:

m_form.on('change', '.checkbox', function(e) {
   var name = $(this).attr('name');
   localStorage.setItem(name, $(this).is(':checked'));
   update_notice_message(); // An example function which you can call
});

This in turn allows you to retrieve the data on page load and keep the form state. Something among the lines of:

checkboxes.each( function () {
   var name = $(this).attr('name');
   var checked = JSON.parse(localStorage.getItem(name));
   if (checked === true) {
      $(this).prop('checked', true);
      $(this).parent().addClass('selected');
   }
});

See how the flexibility of these methods allows us to make a form more enjoyable in just a few lines of code?

Copy & Print quick setup for websites with examples

When building web directories in particular or websites in general you often need copy & print functionalities.

For example you could allow users to easily copy an address. Or maybe you want to allow users to print certain elements from a list – like a search result.

Having tried & used multiple solutions in the past I recently found a combination which I think works great.

As a result, I suggest using 2 simple plugins.

Copy / Clipboard

For the copy/functionality, the best cross-browser solution, in my opinion, at this moment is clipboard.js.

A quick usage example ( besides the examples on their website ) would be:

The plugin gets its value from the data attribute “data-clipboard-text” in the example above. Also the button’s text is changed, after clicking the link, so your users have a nice feedback.

Printing

A good stylesheet is the key to printing pages properly. The problem is that sometimes it’s hard to manage this for dynamic elements. One solution which I used successfully is the jQuery plugin printThis.

This plugin gives you the option to directly print independent elements. Let’s say you want to allow users to print only the search result relevant to them.

Here’s a code sample which I think is self-explanatory, the plugin is very easy to use.

The 2 examples above will come in handy for many websites. I think these plugins will allow you to easily integrate functionality which will make the website more interactive.

Transform Gravity Forms sections into an accordion with jQuery

On a project I was working last week I was asked to create an accordion structure, for ease of use, from an existing Gravity Forms form. The form had a structure in which price fields were separated by section fields, which is a great structure to start with.

Prerequisites

First thing – the form has to contain sections which separate groups of fields.

The second thing is to identify what kind of fields are contained between the sections ( maybe they are not all the same ). Make a note of the specific css classes of those fields. For example: price fields have the class “gfield_price”.

The code

First you have an array for the section which you will check to identify what to do. Next you create an accordion container which will contain the fields whose visibility you can toggle. After that you append the fields to the container and add the actions which allow opening/closing accordions. Bonus: you can also add a small text to make the section more intuitive to click.

This is the final code with explanations for each operation:

EDIT: after a comment making a good observation I updated the code to include a toggle of the EXPAND/COLLAPSE text.