form submission changed to ajax

assets/public/note.js

@@ -0,0 +1,20 @@
+"use strict";
+
+function post(url, vals, cb) {
+    var data = new FormData();
+    for (var key in vals) {
+        data.append(key, vals[key]);
+    }
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', url)
+    xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) return cb(xhr.status, xhr.responseText) };
+    xhr.send(data);
+}
+
+function report(id) {
+    var resp = prompt("Please shortly explain the problem with this note.");
+    if (resp) {
+        post('/' + id + '/report', { "report": resp })
+        alert("Thank you!")
+    }
+} 

assets/public/style.css

@@ -272,3 +272,8 @@ form {
 li {
     margin: 0.3em 0;
 }
+
+#feedback {
+    margin-left: 1em;
+    color: #f66;
+}

assets/templates/form.html

@@ -8,19 +8,23 @@
         <link href="/style.css" rel="stylesheet" type="text/css" />
         <base target="_blank" />
         <script src='https://www.google.com/recaptcha/api.js'></script>
+        <script src='/note.js'></script>
     </head>
     <body>
         <form action="/note" autocomplete="off" method="POST" target="_self">
-            <textarea autofocus name="text">{{.Text}}</textarea>
+            <textarea autofocus id="text">{{.Text}}</textarea>
             <fieldset>
-                <input id="id" name="id" value="{{.ID}}" type="hidden" />
-                <input class="ui-elem" name="password" placeholder="Password for editing" type="text" autocomplete="off" />
+                <input id="id" value="{{.ID}}" type="hidden" />
+                <input class="ui-elem" id="password" placeholder="Password for editing" type="text" autocomplete="off" />
                 <label style="margin-right: 1em">
-                    <input id="tos" name="tos" type="checkbox" onClick="toggleButton()" />
+                    <input id="tos" type="checkbox" onClick="toggleButton()" />
                     Accept <a href="/TOS.md">Terms of Service</a>
                 </label>
                 <div id="captcha" class="g-recaptcha" data-sitekey="6LemnDEUAAAAAC6A4VNRefz0BSLiC343W4sXQd6I"></div>
-                <input class="button ui-elem" disabled id="publish-button" name="button" type="submit" value="Publish Note" />
+                <button class="button ui-elem" disabled id="publish-button" type="button" onclick="submitForm()">
+                    {{if .ID}}Update{{else}}Publish{{end}} Note
+                </button>
+                <span id="feedback"></span>
             </fieldset>
         </form>
         <footer>
@@ -34,6 +38,27 @@
                 $('publish-button').disabled = !$('tos').checked;
                 $('captcha').style.display = $('tos').checked ? 'block' : 'none';
             }
+            function submitForm() {
+                var id = $("id").value;
+                var text = $("text").value;
+                var deletion = id != "" && text == "";
+                if (deletion && !confirm("Do you want to delete this note?")) {
+                    return;
+                }
+                var resp = post("/", { 
+                    "id": id,
+                    "text": text,
+                    "tos": $("tos").value,
+                    "password": $("password").value
+                }, function (status, responseRaw) {
+                    var response = JSON.parse(responseRaw);
+                    if (status < 400 && response.Success) {
+                        window.location.replace(deletion ? "/" : "/" + response.Payload)
+                    } else {
+                        $('feedback').innerHTML = status + ": " + response.Payload;
+                    }
+                })
+            }
         </script>
     </body>
 </html>

assets/templates/note.html

@@ -6,6 +6,7 @@
         <meta charset="UTF-8" />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
         <link href="/style.css" rel="stylesheet" type="text/css" />
+        <script src='/note.js'></script>
     </head>
     <body>
         {{.Ads}}
@@ -18,21 +19,9 @@
             <a href="/{{.ID}}/stats">statistics</a> &middot;
             <a href="/{{.ID}}/edit">edit</a> &middot;
             <a href="/{{.ID}}/export">export</a> &middot;
-            <a href="javascript:void(0)" onclick="report()">report abuse</a> &middot;
+            <a href="javascript:void(0)" onclick="report({{.ID}})">report abuse</a> &middot;
             {{end}}
             <a href="/TOS.md">terms of service</a>
-            <script>
-                function report() {
-                    var resp = prompt("Please shortly explain the problem with this note.");
-                    if (resp) {
-                        var xhr = new XMLHttpRequest();
-                        xhr.open('POST', '/{{.ID}}/report');
-                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-                        xhr.send("report=" + encodeURIComponent(resp));
-                        alert("Thank you!")
-                    }
-                }
-            </script>
         </footer>
     </body>
 </html>