JSFiddle - React, Tailwind, and code Playground

by 6233114

HTML

<!-- show progress animation image on server calls -->
<div id="loading-div-background">
    <div id="loading-div" class="ui-corner-all">
        <img src="http://i492.photobucket.com/albums/rr285/sylveraic/loading.gif" />
    </div>
</div>
<hr />

<form id="test_form" class="form-horizontal" method="post">

<div id="row_id_oneg" class="control-group  ">
    <label for="id_one" class="control-label required">Input One:</label>
    <div class="controls">
        <input id="id_one" type="text" name="one" maxlength="250" class="input-xlarge6">
    </div>
</div>
<div class="form-actions">
    <input class="btn-u btn-u-blue" onclick="showProgressAnimation();" type="submit" value="Add"> 
        
    <a href="test.html" onclick="showProgressAnimation();" class="btn-u">Cancel</a>

</div>
    
</form>

CSS

#loading-div-background {
    background-color: rgba(246, 246, 246, 0.7);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
#loading-div {
    background-color: transparent;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    z-index: 9999;
}
/*Button Style*/
.btn {
	box-shadow: none;
}

.btn-u {
	border:0;
	font-size:14px;
	cursor:pointer;
	padding:5px 13px;
	position:relative;
	background:#3498db;
	display:inline-block;
	color:#fff !important;
	text-decoration:none !important;
}
.btn-u:hover {
	color:#fff;
	background:#5fb611;
	text-decoration:none;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
}

.btn-u-blue {
	background: #3498db !important;
}

.btn-u-blue:hover {
	background: #2980b9 !important;
}

.form-horizontal .control-label {
    width: 160px;
}

.form-horizontal .controls {
    margin-left: 165px;
}

JavaScript

/*!
 * jQuery Plugin: Are-You-Sure (Dirty Form Detection)
 * https://github.com/codedance/jquery.AreYouSure/
 *
 * Copyright (c) 2012-2014, Chris Dance and PaperCut Software http://www.papercut.com/
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Author:  [email protected]
 * Version: 1.6.0
 * Date:    7th Feb 2014
 */
(function ($) {

    $.fn.areYouSure = function (options) {

        var settings = $.extend({
            'message': 'You have unsaved changes!',
                'dirtyClass': 'dirty',
                'change': null,
                'silent': false,
                'addRemoveFieldsMarksDirty': false,
                'fieldSelector': "select,textarea,input[type='text'],input[type='password'],input[type='checkbox'],input[type='radio'],input[type='hidden'],input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='range'],input[type='search'],input[type='tel'],input[type='time'],input[type='url'],input[type='week']"
        }, options);

        var getValue = function ($field) {
            if ($field.hasClass('ays-ignore') || $field.hasClass('aysIgnore') || $field.attr('data-ays-ignore') || $field.attr('name') === undefined) {
                return null;
            }

            if ($field.is(':disabled')) {
                return 'ays-disabled';
            }

            var val;
            var type = $field.attr('type');
            if ($field.is('select')) {
                type = 'select';
            }

            switch (type) {
                case 'checkbox':
                case 'radio':
                    val = $field.is(':checked');
                    break;
                case 'select':
                    val = '';
                    $field.find('option').each(function (o) {
                        var $option = $(this);
                        if...