add xhrform - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 267bee63120715202991477764a93a6cd0e76b7e
(DIR) parent 369940df48f616bb76d2511590be435f1093da94
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Fri, 28 Aug 2020 20:56:03 +0200
add xhrform
Diffstat:
A xhrform/README | 32 +++++++++++++++++++++++++++++++
A xhrform/example.html | 23 +++++++++++++++++++++++
A xhrform/xhrform.js | 48 +++++++++++++++++++++++++++++++
3 files changed, 103 insertions(+), 0 deletions(-)
---
(DIR) diff --git a/xhrform/README b/xhrform/README
@@ -0,0 +1,32 @@
+xhrform
+=======
+
+Script to send a form with a submit button using XMLHttpRequest (ajax) in a
+simple way.
+
+
+FEATURES
+--------
+
+- Small:
+ - Filesize: +- 1.6KB.
+ - Lines: +- 50, not much code, so hopefully easy to understand.
+ - No dependencies on other libraries like jQuery.
+- (Graceful) fallback to a normal form if Javascript is disabled.
+- Permissive ISC license, see LICENSE file.
+
+
+USAGE
+-----
+
+
+EXAMPLES
+--------
+
+See example.html for an example.
+
+
+Author
+------
+
+Hiltjo Posthuma <hiltjo@codemadness.org>
(DIR) diff --git a/xhrform/example.html b/xhrform/example.html
@@ -0,0 +1,23 @@
+<html>
+<body>
+
+<h1>Example form</h1>
+
+<form method="post" action="">
+ <label for="search">Search:</label>
+ <input type="text" id="search" name="search" />
+ <input type="submit" name="save" data-xhr data-xhr-status="showstatus" />
+</form>
+
+Result:
+<div id="result" style="border: 1px #000 solid"> </div>
+
+<script type="text/javascript" src="xhrform.js"></script>
+<script type="text/javascript">
+function showstatus(x, formdata) {
+ var el = document.getElementById("result").innerHTML = "Response status: " + x.status;
+}
+</script>
+
+</body>
+</html>
(DIR) diff --git a/xhrform/xhrform.js b/xhrform/xhrform.js
@@ -0,0 +1,48 @@
+function xhr_form(el) {
+ var form = el.form;
+ var statusfn = window[el.getAttribute("data-xhr-status")] || function(x) { };
+ var method = el.getAttribute("data-xhr-method") || form.method || "get";
+ var action = el.getAttribute("data-xhr-action") || form.action || "";
+ var encoding = el.getAttribute("data-xhr-encoding") || form.encoding || "application/x-www-form-urlencoded";
+ var timeout = parseInt(el.getAttribute("data-xhr-timeout") || "10000");
+
+ // FormData is normally sent as multipart encoded with x.send(data).
+ var formdata = new FormData(form);
+ formdata.append(el.name, el.value); // add submit button itself.
+ var data = "";
+ if (encoding === "application/x-www-form-urlencoded" ) {
+ var l = [];
+ for (var d of formdata.entries())
+ l.push(d[0] + "=" + encodeURIComponent(String(d[1])));
+ data = l.join("&");
+ } else {
+ data = formdata;
+ }
+
+ var x = new(XMLHttpRequest);
+ x.open(method, action, true); // async
+ x.setRequestHeader("Content-Type", encoding);
+ x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+ x.timeout = timeout;
+ x.onreadystatechange = function () {
+ if (x.readyState != 4)
+ return;
+ statusfn(x, formdata);
+ };
+ x.send(data);
+}
+
+/* initialize forms automatically on input submit which has a data-xhr attribute */
+document.addEventListener("click", function(e) {
+ // input[type=submit] with data-xhr set.
+ if (e.target === null || e.target.type !== "submit" ||
+ e.target.tagName !== "INPUT" ||
+ !e.target.form || e.target.getAttribute("data-xhr") === null)
+ return;
+
+ xhr_form(e.target);
+
+ // prevent default action.
+ e.preventDefault();
+ return !!e.stopPropagation();
+}, false);