title: Dart: AJAX form submit
body: <p><strong>Please note: I am not interested in using Polymer for this; I want to use "pure" Dart!</strong></p>
  
  <p>I am trying to build a simple sign-in screen for my Dart app, and am having difficulty getting the two form variables (<code>email</code> and <code>password</code>) to POST to the server-side:</p>
  
  <p>Here's my main HTML file (<code>myapp.html</code>):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Sign in&lt;/title&gt;
          &lt;link rel="stylesheet" href="assets/myapp/myapp/myapp.css"&gt;
          &lt;link rel="stylesheet" href="assets/myapp/bootstrap/css/bootstrap.min.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;form id="signinForm" method="POST" class="form-signin"&gt;
                  &lt;h2 class="form-signin-heading"&gt;Please sign in&lt;/h2&gt;
                  &lt;input type="text" class="input-block-level" name="email" placeholder="Email address"&gt;
                  &lt;input type="password" class="input-block-level" name="password" placeholder="Password"&gt;
                  &lt;button class="btn btn-large btn-primary" id="signinBtn" type="submit"&gt;Sign in&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;script type="application/dart" src="myapp.dart"&gt;&lt;/script&gt;
          &lt;script src="packages/browser/dart.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my main Dart file (<code>myapp.dart</code>):</p>
  
  <pre><code>import 'dart:html';
  
  void main() {
      querySelector("#signinForm")
          ..onClick.listen(handle);
  }
  
  void handle(MouseEvent mouseEvent) {
      mouseEvent.preventDefault();
  
      FormElement formElement = mouseEvent.target as FormElement;
  
      var url = "http://localhost:8080/myapp/signinService";
  
      var request = HttpRequest.request(
          url,
          method: formElement.method,
          sendData: new FormData(formElement)
      ).then(onDataLoaded);
  }
  
  void onDataLoaded(HttpRequest req) {
      String response = req.responseText;
      if(response == 1)
          window.alert("You are signed in!");
      else
          window.alert("Sign in failed. Check credentials.");
  }
  </code></pre>
  
  <p>When I run this in a browser I see the sign in screen appear, but when I click the signin button nothing happens, and Firebug throws a bunch of errors on the cross-compiled, obfuscated, minified JavaScript:</p>
  
  <blockquote>
    <p>: CastError: Casting value of type qE to incompatible type Yu</p>
  </blockquote>
  
  <p>I want this to be an AJAX request so that the user does <strong>not</strong> have to experience a page reload (the intent here is to be a single page app).</p>
  
  <p>Any ideas as to what's going on here? I'm almost 100% confident the issue isn't on the server-side, so for now I'm omitting to post server code. But I'll update my question with server code if need be.</p>