xhrform: refactor and make it more flexible to use - 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 bcea34ac9ce237ca816262b5ed70aa06dc046a1b
(DIR) parent 267bee63120715202991477764a93a6cd0e76b7e
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Wed, 9 Sep 2020 20:36:00 +0200
xhrform: refactor and make it more flexible to use
By using a data-binding in a HTML element or by defining a "config" object.
Diffstat:
M xhrform/xhrform.js | 54 ++++++++++++++++++-------------
1 file changed, 31 insertions(+), 23 deletions(-)
---
(DIR) diff --git a/xhrform/xhrform.js b/xhrform/xhrform.js
@@ -1,15 +1,29 @@
-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");
+function xhr_form_config(el) {
+ return {
+ "form" : el.form,
+ "fn" : window[el.getAttribute("data-xhr-status")],
+ "method" : el.getAttribute("data-xhr-method") || (el.form ? el.form.method : ""),
+ "action" : el.getAttribute("data-xhr-action") || (el.form ? el.form.action : ""),
+ "encoding" : el.getAttribute("data-xhr-encoding") || (el.form ? el.form.encoding : ""),
+ "timeout" : el.getAttribute("data-xhr-timeout")
+ };
+}
- // 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.
+function xhr_form_send(c, formdata) {
+ var x = new(XMLHttpRequest);
+ var encoding = c.encoding || "application/x-www-form-urlencoded";
+ x.open(c.method || "get", c.action || "", true); // async
+ x.setRequestHeader("Content-Type", encoding);
+ x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+ x.timeout = parseInt(c.timeout || "10000");
+ x.onreadystatechange = function () {
+ if (x.readyState != 4)
+ return;
+ if (typeof(c.fn) == "function")
+ c.fn(x, formdata);
+ };
var data = "";
+ // FormData is normally sent as multipart encoded.
if (encoding === "application/x-www-form-urlencoded" ) {
var l = [];
for (var d of formdata.entries())
@@ -18,29 +32,23 @@ function xhr_form(el) {
} 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);
}
+function xhr_form_submit(el) {
+ var d = new FormData(el.form);
+ d.append(el.name, el.value); // add submit button itself.
+ return xhr_form_send(xhr_form_config(el), d);
+}
+
/* 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);
+ xhr_form_submit(e.target);
// prevent default action.
e.preventDefault();