JSFiddle - React, Tailwind, and code Playground

by Brewal Renault

HTML

<div id="isOnline">Your navigator is</div>
<h2>My form</h2>
<form action="/echo/json/" method="post" id="myForm">
    <p>
        <label>A text input 
            <input type="text" placeholder="Enter value" name="textinput" />
        </label>
    </p>
    <p>
        <label>A checkbox
            <input type="checkbox" name="checkbox" />
        </label>
    </p>
    <p>
        <input type="submit" value="Send form" />
    </p>
</form>
<h2>Log : </h2>
<div id="log"></div>

CSS

#isOnline {
    background: #E22;
    color: white;
    text-align: center;
    padding: 10px;
}
#isOnline:after {
    content: ' offline';
}
#isOnline.online {
    color: black;
    background: #3D3;
}
#isOnline.online:after {
    content: ' online. Try to turn it off before submitting the form.';
}
#myForm {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}
#log {
    border: 1px solid black;
    padding: 10px;
    min-height: 150px;
}
pre {
    margin-left: 40px;
    background: #CCC;
    padding: 10px;
    word-warp: break-word;
}

JavaScript

/**
 * offlineForm
 * 
 * @version 0.1.0
 * @example $('form.offline').offlineForm();
 * @author Brewal RENAULT http://oziolab.fr/
 * 
 * This is a jQuery plugin for synchronizing forms when navigator is
 * offline. If it is, forms will be stored into localStorage, until an online 
 * event is detected. If it is not, forms are directly sent without any other
 * action done. 
 */
(function($)
{
    var defaults = 
    {
        // localStorage key of the plugin
        key: "offlineForm",
        // class css 
        classname: "offlineForm",
        // if true, send the form with ajax
        onlineAjaxSend: false,
        // called before syncing all local data
        beforeSync: null,
        // called when forms are synchronized
        afterSync: null,
        // called when a form is syncrhonized
        onSync: null,
        // called when offline and a form is submited
        onStorage: null,
        // called when an error occured during syncing
        onError: null,
        // called before sending the ajax request when online
        beforeOnlineAjaxSend: null,
        // callback for online ajax sending
        onlineAjaxCallback: null
    };

    var p = defaults;
    
    function onFormSubmit() {
        form = $(this);
        // if navigator is online, we just send the form
        if (navigator.onLine) {
            if (p.onlineAjaxSend) {
                if (p.beforeOnlineAjaxSend) {
                    p.beforeOnlineAjaxSend();
                }
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function(ret) {
                        if (p.onlineAjaxCallback) {
                            p.onlineAjaxCallback(ret);
                        }
                    }
                }).fail(function(e) {
                    if (p.onError) p.onError(e);
                    return false;
                });
 ...