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">&lt;p&gt;I'm some HTML. Look, &lt;b&gt;I'm bold!&lt;/b&gt;&lt;/p&gt;</textarea>
    <input id="ourButton" type="submit" value="inject some HTML">
</form>
<div id="ourTarget">
    <p>This is our target. The HTML we send to the server will replace this content.</p>
</div>

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;
    padding: 20px;
}

JavaScript

new Form.Request($('ourForm'), $('ourTarget'), {
    onSend: function(){
        $('ourButton').set('value', 'Sending the form...').set('disabled', true);
    },
    onComplete: function(){
        $('ourButton').set('value', 'inject some HTML').set('disabled', false);
    }
});