JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<form method="post" action="/echo/html/" ajax="true"> 
    <span id="result">Message will be placed here..</span>  
    <span>        
    <input type="text" name="html" placeholder="Your message.." />
    </span>  
    <span>
    <input type="submit" value="Submit" />
    <label><img id="loader" src="http://dev.cloudcell.co.uk/bin/loading.gif"/></label>
    </span>
</form>

CSS

form span {
    display: block;
    margin: 10px;
}
input[type="text"] {
    border: 1px soild #ccc;
    width: 200px;
    padding: 5px;
}
input[type="submit"] {
    padding: 5px 15px;
}
span#result {
    padding: 5px;
    background: cyan;
}
img#loader {
    display: none;
}

JavaScript

$(document).ready(function (e) {
    $("form[ajax=true]").submit(function (e) {
        e.preventDefault();
        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();
        $("#loader").show();
        $.ajax({
            url: form_url,
            type: form_method,
            data: form_data,
            cache: false,
            success: function (returnhtml) {
                $("#result").html(returnhtml);
                $("#loader").hide();
            }
        });
    });
});