First Commit
This commit is contained in:
83
views/forms.hbs
Normal file
83
views/forms.hbs
Normal file
@ -0,0 +1,83 @@
|
||||
<!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@1.2.6/out/light.css">
|
||||
|
||||
<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}}
|
||||
|
||||
{{#ifCond type "===" "number"}}
|
||||
<input type="number" placeholder="{{label}}" name="{{name}}" value="{{value}}" />
|
||||
{{/ifCond}}
|
||||
|
||||
{{#ifCond type "===" "boolean"}}
|
||||
<input type="checkbox" name="{{name}}" checked="{{value}}" />
|
||||
{{/ifCond}}
|
||||
|
||||
{{#ifCond type "===" "textarea"}}
|
||||
<textarea class="inp" name="{{name}}" rows="20">{{value}}</textarea>
|
||||
{{/ifCond}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<button class="btn btn-primary" onclick="submitData()">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const url = "{{url}}";
|
||||
|
||||
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(url, {
|
||||
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>
|
Reference in New Issue
Block a user