JSFiddle - React, Tailwind, and code Playground

by Djamil

HTML

<p>This form sends an HTML string to the mooshell html echo controller that just replies with it in the response. Change it if you like.</p>
<form id="ourForm" action="/shell/ajax_html_echo/">
    <textarea name="html" class="minLength:1">&lt;li&gt;I'm some HTML. Look, &lt;b&gt;I'm bold!&lt;/b&gt;&lt;/li&gt;</textarea>
    <input id="ourButton" type="submit" value="inject some HTML">
</form>
<ul id="ourTarget">
    <li>This is our target. The HTML we send to the server will replace this content.</li>
</ul>

CSS

body {
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 12px;
}
textarea {
    width: 90%;
    height: 20px;
    margin: 10px 0px;
}
#ourTarget {
    margin-top: 10px;
    border: 1px solid #999;
    list-style: disc inside !important;
}
#ourTarget li {
    padding: 20px 6px;
}
.spinner {
    position: absolute;
    opacity: 0.9;
    filter: alpha(opacity=90);
    z-index: 999;
    background: #fff;
}
.spinner-msg {
    text-align: center;
    font-weight: bold;
}

.spinner-img {
    background: url(http://mootools.net/releases/mootools-more-1.2.4.4/Styles/Interface/Spinner/spinner.gif) no-repeat;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}
.validation-advice {
    color: #red;
}

JavaScript

new Form.Validator.Inline($('ourForm'));
new Form.Request.Append($('ourForm'), $('ourTarget'), {
    requestOptions: {
        spinnerOptions: {
            message: 'Sending the form...'
        }
    }
});