First attempt at in-form XHR

examples/comix/app.js

@@ -30,6 +30,12 @@ app.configure('production', function(){
 
 // Routes
 
+app.get('/', function(req, res){
+  res.render('index', { title: 'Comix' });
+});
+
+
+
 
 app.listen(3000);
 console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

examples/comix/public/scripts/comic_put.dart

@@ -0,0 +1,30 @@
+#import('dart:html');
+#import('dart:json');
+
+main() {
+  var form_el = document.query('#new-comic-form');
+
+  form_el.on.submit.add((event) {
+    var form = event.target
+      , title = form.query('input[name=title]')
+      , author = form.query('input[name=author]')
+      , format = form.queryAll('input[name=format]');
+
+    event.preventDefault();
+
+    print("title: ${title.value}");
+    print("author: ${author.value}");
+    print(format);
+
+    var data = {'title':title.value, 'author':author.value}
+      , json = JSON.stringify(data);
+
+    print(json);
+
+    var req = new XMLHttpRequest();
+    req.open('post', '/comics', true);
+    req.setRequestHeader('Content-type', 'application/json');
+    req.send(json);
+    print(req.responseText);
+  });
+}

examples/comix/views/index.jade

@@ -1,2 +1,32 @@
+script(src="scripts/comic_put.dart", type="application/dart")
+
 h1= title
-p Welcome to #{title}
+p Welcome to #{title}
+
+p Add a sweet comic to the collection:
+form(action="comics", id="new-comic-form")
+  p
+    label
+      = "Title"
+      br/
+      input(type="text", name="title", id="comic-title")
+
+  p
+    label
+      = "Author"
+      br/
+      input(type="text", name="author", id="comic-author")
+
+  p
+    ="Format"
+    p
+      label
+        input(type="checkbox", name="format", value="tablet", id="comic-table")
+        ="Tablet"
+    p
+      label
+        input(type="checkbox", name="format", value="dead-tree", id="comic-dead-tree")
+        ="Dead Tree"
+
+  p
+    input(type="submit", value="Bazinga!")

examples/comix/views/layout.jade

@@ -3,4 +3,5 @@ html
   head
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
-  body!= body
+    script="{}"
+  body!= body