GopherProxy

	add xhrform - jscancer - Javascript crap (relatively small)
	git clone git://git.codemadness.org/jscancer
	Log
	Files
	Refs
	README
	LICENSE
	---
	commit 267bee63120715202991477764a93a6cd0e76b7e
	parent 369940df48f616bb76d2511590be435f1093da94
	Author: Hiltjo Posthuma <[email protected]>
	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(-)
	---
	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 <[email protected]>
	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 statu…
	+}
	+</script>
	+
	+</body>
	+</html>
	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(…
	+ var method = el.getAttribute("data-xhr-method") \|\| form.method \|\| …
	+ var action = el.getAttribute("data-xhr-action") \|\| form.action \|\| …
	+ var encoding = el.getAttribute("data-xhr-encoding") \|\| form.encoding \|…
	+ 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 attribu…
	+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);