This repository has been archived on 2021-06-02. You can view files and clone it, but cannot push or open issues or pull requests.
RealtimeDB-OLD/views/forms.hbs

86 lines
2.6 KiB
Handlebars
Raw Permalink Normal View History

2019-09-18 19:54:28 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="stylesheet" href="https://unpkg.com/@hibas123/theme/out/base.css">
<link rel="stylesheet" href="https://unpkg.com/@hibas123/theme/out/light.css">
2019-09-18 19:54:28 +00:00
<style>
#message {
visibility: hidden;
background-color: lightgreen;
border: 1px solid lime;
border-radius: .5rem;
padding: 1rem;
font-size: 1.5rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="margin" style="margin-top: 4rem;">
<h1>{{title}}</h1>
<div id="message"> </div>
<form id="f1" action="JavaScript:void(null)">
{{#each fields}}
<div class="input-group">
<label>{{label}}</label>
{{#ifCond type "===" "text"}}
<input type="text" placeholder="{{label}}" name="{{name}}" value="{{value}}" />
{{/ifCond}}
2019-09-18 19:54:28 +00:00
{{#ifCond type "===" "number"}}
<input type="number" placeholder="{{label}}" name="{{name}}" value="{{value}}" />
{{/ifCond}}
2019-09-18 19:54:28 +00:00
{{#ifCond type "===" "boolean"}}
<input type="checkbox" name="{{name}}" checked="{{value}}" />
{{/ifCond}}
2019-09-18 19:54:28 +00:00
{{#ifCond type "===" "textarea"}}
<textarea class="inp" name="{{name}}" rows="20">{{value}}</textarea>
{{/ifCond}}
</div>
2019-09-18 19:54:28 +00:00
{{/each}}
<button class="btn btn-primary" onclick="submitData()">Submit</button>
</form>
</div>
</div>
<script>
let u = new URL("{{url}}", window.location.origin);
let key = new URL(window.location.href).searchParams.get("key");
if (key)
u.searchParams.set("key", key);
2019-09-18 19:54:28 +00:00
const message = document.getElementById("message");
const form = document.getElementById("f1");
function submitData() {
let res = {};
Array.from(new FormData(form).entries()).forEach(([name, value]) => res[name] = value);
fetch(u.href, {
2019-09-18 19:54:28 +00:00
method: "POST",
headers: {
"content-type": "application/json"
},
body: JSON.stringify(res)
}).then(res => {
return res.text();
}).then(res => {
message.innerText = res;
message.style.visibility = "unset";
})
return false;
}
</script>
</body>
</html>