From 7b44b8cb1921ada141444aeec5d3f6e6b9ebdd10 Mon Sep 17 00:00:00 2001
From: Andre Beging <a.beging@eas.domain.local>
Date: Thu, 13 Feb 2020 10:45:15 +0100
Subject: [PATCH] Form submit logic

---
 content/anmeldung.md     |  4 +--
 src/typescript/script.ts | 61 ++++++++++++++++++++++++++++++++++++++++
 static/js/script.js      | 44 +++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/content/anmeldung.md b/content/anmeldung.md
index 91acfaf..faf1b91 100644
--- a/content/anmeldung.md
+++ b/content/anmeldung.md
@@ -11,7 +11,7 @@ date: '2020-02-12'
     </div>
 </div>
 <div class="center-container">
-    <form class="form">
+    <form class="form" method="GET" action="http://beging.de/form/write/ddwetest">
         <div class="grow-1">
             <input id="name" name="name" type="text" required />
             <label for="name">Name</label>
@@ -21,7 +21,7 @@ date: '2020-02-12'
             <label for="mail">E-Mail</label>
         </div>
         <div class="grow-1">
-            <input id="hex" name="hex" type="text" placeholder="0x00" required pattern="[0-9a-fA-F]{1,2}x[0-9a-fA-F]{1,2}f" />
+            <input id="hex" name="hex" type="text" placeholder="0x00" required pattern="[0-9a-fA-F]{1,2}x[0-9a-fA-F]{1,2}" />
             <label for="hex">Hex-ID (z.B. 0xC0)</label>
         </div>
         <div class="grow-1">
diff --git a/src/typescript/script.ts b/src/typescript/script.ts
index 08ae3f3..22543f7 100644
--- a/src/typescript/script.ts
+++ b/src/typescript/script.ts
@@ -7,3 +7,64 @@ if (document.body.classList.contains("hero")) {
             document.body.classList.remove("scroll");
     });
 }
+
+document.querySelector('form').addEventListener('submit', (e : any) => {
+    let targetUrl = e.target.action;
+
+    // Load form data
+    let formParameter : Array<string> = GetFormParameter(e.target);
+
+    // Build url
+    let queryString = Object.keys(formParameter).map((k : any) => encodeURIComponent(k) + "=" + encodeURIComponent(formParameter[k])).join("&");
+    let getUrl = targetUrl + "?" + queryString;
+
+    // Perform get request
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", getUrl);
+    xmlHttp.send();
+
+    // Cleanup
+    e.target.reset();
+    alert("Anmeldung abgeschickt");
+    e.preventDefault();
+  });
+
+
+
+function GetFormParameter( form : any )
+{
+    var params = new Array()
+    var length = form.elements.length
+    for( var i = 0; i < length; i++ )
+    {
+        let element = form.elements[i]
+
+        if(element.tagName == 'TEXTAREA' || element.tagName == 'SELECT')
+        {
+            params[element.name] = element.value
+        }
+        else if( element.tagName == 'INPUT' )
+        {
+            if( element.type == 'text' || element.type == 'email' || element.type == 'hidden' || element.type == 'password')
+            {
+                params[element.name] = element.value
+            }
+            else if( element.type == 'radio' && element.checked )
+            {
+                if( !element.value )
+                    params[element.name] = "on"
+                else
+                    params[element.name] = element.value
+
+            }
+            else if( element.type == 'checkbox' && element.checked )
+            {
+                if( !element.value )
+                    params[element.name] = "on"
+                else
+                    params[element.name] = element.value
+            }
+        }
+    }
+    return params;
+}
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 08ae3f3..cd10533 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -7,3 +7,47 @@ if (document.body.classList.contains("hero")) {
             document.body.classList.remove("scroll");
     });
 }
+document.querySelector('form').addEventListener('submit', function (e) {
+    var targetUrl = e.target.action;
+    // Load form data
+    var formParameter = GetFormParameter(e.target);
+    // Build url
+    var queryString = Object.keys(formParameter).map(function (k) { return encodeURIComponent(k) + "=" + encodeURIComponent(formParameter[k]); }).join("&");
+    var getUrl = targetUrl + "?" + queryString;
+    // Perform get request
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", getUrl);
+    xmlHttp.send();
+    // Cleanup
+    e.target.reset();
+    alert("Anmeldung abgeschickt");
+    e.preventDefault();
+});
+function GetFormParameter(form) {
+    var params = new Array();
+    var length = form.elements.length;
+    for (var i = 0; i < length; i++) {
+        var element = form.elements[i];
+        if (element.tagName == 'TEXTAREA' || element.tagName == 'SELECT') {
+            params[element.name] = element.value;
+        }
+        else if (element.tagName == 'INPUT') {
+            if (element.type == 'text' || element.type == 'email' || element.type == 'hidden' || element.type == 'password') {
+                params[element.name] = element.value;
+            }
+            else if (element.type == 'radio' && element.checked) {
+                if (!element.value)
+                    params[element.name] = "on";
+                else
+                    params[element.name] = element.value;
+            }
+            else if (element.type == 'checkbox' && element.checked) {
+                if (!element.value)
+                    params[element.name] = "on";
+                else
+                    params[element.name] = element.value;
+            }
+        }
+    }
+    return params;
+}