 |
xhrform: refactor and make it more flexible to use - jscancer - Javascript crap… |
 |
git clone git://git.codemadness.org/jscancer |
 |
Log |
|
Files |
|
Refs |
|
README |
|
LICENSE |
|
--- |
|
commit bcea34ac9ce237ca816262b5ed70aa06dc046a1b |
|
parent 267bee63120715202991477764a93a6cd0e76b7e |
|
Author: Hiltjo Posthuma <[email protected]> |
|
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(-) |
|
--- |
|
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(… |
|
- 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"… |
|
+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… |
|
+ "action" : el.getAttribute("data-xhr-action") || (el.form ? el… |
|
+ "encoding" : el.getAttribute("data-xhr-encoding") || (el.form … |
|
+ "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 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); |
|
+ xhr_form_submit(e.target); |
|
|
|
// prevent default action. |
|
e.preventDefault(); |
