troogs/dd-weekend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form submit logic

Browse Source
This commit is contained in:
Andre Beging
2020-02-13 10:45:15 +01:00
parent bce1c032d1
commit 7b44b8cb19
3 changed files with 107 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/anmeldung.md
View File

@@ -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">

61
src/typescript/script.ts
View File

@@ -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;
}

44
static/js/script.js
View File

@@ -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;
}