Example: Get date format by class name and submit data via AJAX (with jQuery)

For this example, we’re going to leverage a function in a namespace (APP.utils) named (APP.utils.getValueByClass()) that I wrote in my last post (Set a value based on the presence of a class name (with jQuery)). We’re going to get the value of an input (a date), determine the date format by class name, and submit the day, month, and year to our web server via AJAX and display the response (text “success”) when done.

The HTML:

<!-- the 'us' class name indicates the date format, the placeholder directs the user -->
<input type="text" id="start" name="start" class="date us" placeholder="09/02/2014">
<p id="success"></p>

The JavaScript:

// this function gets us the day, month, and year values
APP.utils.getDateValues = function( date, format ){
    var parts, sep, d, m, y;
    // allow use of either "/" or "-" for separators    
    sep = (date.indexOf("/") > -1) ? "/" : "-";
    parts = date.split(sep);
    format = format.toLowerCase();
    if ( format === "us" ){
        m = parts[0];
        d = parts[1];
        y = parts[2];
    }
    else if ( format === "eu" ){
        d = parts[0];
        m = parts[1];
        y = parts[2];
    }
    else { // format assumed to be ISO
        y = parts[0];
        m = parts[1];
        d = parts[2];
    }
    return { year: y, month: m, day: d }
}

Then, it’s pretty trivial to get the parts of a date when submitting a form:

$("#form-id").submit(function(e){
    e.preventDefault(); // we don't want to do an actual form submit
    var $input, format, date;
    $input = $("#start");
    // determine the format by class name (us, eu, or iso)    
    format = APP.utils.getValueByClass($input, ["us","eu","iso"]);
    // get the day, month, and year values as properties to the "date" object
    date   = APP.utils.getDateValues($input.val(), format);
    // output will be: date: { year: 2014, month: 08, day: 28 }
    
    // post the data and display the response data
    $.ajax({
        type: "POST",
        url: "/rest/form/endpoint",
        data: {
            month: date.month,
            day:   date.day,
            year:  date.year
        }
    }).done(function(data){
        // server returns text "success" after saving the data
        $("#success").html(data);
    });
    return false;
});

That’s it. You get the day, month, and year values of a single-field date input, of which the format was determined by class name (in this case, we’re using the ‘us’ format), submit the data via AJAX, and display the returned data on the page. All with jQuery, because it makes using AJAX on the front-end pretty easy, and our app is already using it.

(here’s a jsFiddle to play with it – enter a date, change the format, then update to view the values below)
http://jsfiddle.net/g99ffked/2/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s