MW Logo Black

Table of Contents

Other Resources

contemporary website developer man typing and writing code for program website

How to Build Website Traffic in 2024: Essential Strategies for Success

In today’s digital age, building website traffic is more crucial than ever. With millions of websites vying for attention, standing …

Website Design Wireframe Examples Of Web And Mobile Wireframe Sketches Printable.

Why should you start your web design project with wireframes?

In the rapidly evolving digital world, establishing a strong online presence is pivotal for success. A website’s design is not …

Reactjs 2 Way Data Binding

ReactJS Data Binding

ReactJS Data Binding is pretty simple … if you are doing any web or app development in today’s market, you …

How to save input data with jQuery cookies

Jquery Cookies

As a UX designer and developer I work with clients of all sorts, and of course I receive all sorts of requests for web dev trickery. The other day I had a client request that stumped me … he had the need to save the users input data from a form so that if they refreshed and did not submit the form would be re-presented with the data that was input by the user. I know crazy, right? Not really, this is actually a great trick for a better user experience.

So after a few google searches I turned up this post on StackOverflow. Now the question was tagged with PHP, but the best answer was doing this using JavaScript and jQuery.

This ultimately creates a better user experience when filling out forms, not losing their information when refreshing or accidentally hitting the back button.

Here is the solution that worked best for me on how to save input data with jQuery:
The first 2 functions set and get the cookies:

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}

After that we need to grab the data being entered by the user and save it:

function saveValue(input) {
    var name = input.attr('name');
    var value = input.val();
    setCookie(name,value);
}
function getValue(input) {
    var name = input.attr('name');
    var value = getCookie(name);
    if(value != null && value != "" ) {
        return value;
    }
}

Now that you have those functions you can use jQuery to set the cookies with the data entered:

jQuery('input[type="text"], textarea').each(function(){
    var value = getValue(jQuery(this));
    jQuery(this).val(value);
}).on('blur', function(){
    if(jQuery(this).val() != '' ) {
        saveValue(jQuery(this));
    }
});

Leave a Reply

Your email address will not be published. Required fields are marked *

Tired of searching for a web designer?

In less than 2 mins I will show you how I can help you build a better website, rank on google, get more leads, and more customers.

Simply enter your details below and I will send over a personalized presentation of how you can leverage my specific set of skills to help your business and improve your online presence.

What time works best for you?