JSFiddle - React, Tailwind, and code Playground

by keemor

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<b>Simple Form:</b>
<br>
<blockquote>
  <form action="postIt" id="myform">
    Text: <input type="text" data-dojo-type="dijit.form.TextBox" name="formInput" value="Some text"></input><br><br>
    Checkbox: <input type="checkbox" data-dojo-type="dijit.form.CheckBox" name="checkboxInput"></input><br><br>
    <button type="submit" data-dojo-type="dijit.form.Button" id="submitButton">Send it!</button>
  </form>
</blockquote>
<br>
<b>Result</b>
<div id="response"></div>

JavaScript

dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");

function sendForm(){
  var form = dojo.byId("myform");

  dojo.connect(form, "onsubmit", function(event){
    // Stop the submit event since we want to control form submission.
    dojo.stopEvent(event);

    // The parameters to pass to xhrPost, the form, how to handle it, and the callbacks.
    // Note that there isn't a url passed.  xhrPost will extract the url to call from the form's
    //'action' attribute.  You could also leave off the action attribute and set the url of the xhrPost object
    // either should work.
    var xhrArgs = {
      form: dojo.byId("myform"),
      handleAs: "text",
      load: function(data){
        dojo.byId("response").innerHTML = "Form posted.";
      },
      error: function(error){
        // We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
        // docs server.
        dojo.byId("response").innerHTML = "Form posted.";
      }
    }
    // Call the asynchronous xhrPost
    dojo.byId("response").innerHTML = "Form being sent..."
    var deferred = dojo.xhrPost(xhrArgs);
  });
}
dojo.ready(sendForm);