JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<form id="myForm" action="/echo/html/" method="get">
    <input type="hidden" name="html" value="this is the simulated response: done!" />
    <input type="hidden" name="delay" value="3" />
    <div id="form_box">
        <div>
            <p>First Name:</p>
            <input type="text" name="first_name" value="John" />
        </div>
        <div>
            <p>Last Name:</p>
            <input type="text" name="last_name" value="Q" />
        </div>
        <div>
            <p>E-Mail:</p>
            <input type="text" name="e_mail" value="john.q@mootools.net" />
        </div>
        <div>
            <p>MooTooler:</p>
             <input type="checkbox" name="mootooler" value="yes" checked="checked" />
        </div>
        <div>
            <p>New to Mootools:</p>
            <select name="new">
              <option value="yes" selected="selected">yes</option>
              <option value="no">no</option>
            </select>
        </div>
        <div class="hr"><!-- spanner --></div>
        <input type="submit" name="button" id="submitter" />
    <span class="clr"><!-- spanner --></span>
    </div>
</form>
<div id="result"></div>

JavaScript

document.id("myForm").addEvent("submit", function(e) {
    e.stop();
    
    new Request({
        url: this.get("action"),
        method: "post",
        data: this,
        onRequest: function() {
            document.id("result").set("html", "sending...");
        },
        onComplete: function() {
            document.id("result").set("html", this.response.text);
        }
    }).send();
});