TFC/tfcconnection
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

making form more functional

Browse source
This commit is contained in:
Chris Cochrun 2022-11-11 09:57:54 -06:00
parent 30acad0d4c
commit d35be7285f
1 changed files with 68 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
layouts/shortcodes/mt-form.html
View file

@ -1,22 +1,47 @@
{{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }} {{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
<script> <script>
function process() { function submitForm(e) {
var studentAgree = document.getElementById("student-agree").checked; e.preventDefault();
console.log(studentAgree); const form = document.getElementById('form');
var parentAgree = document.getElementById("adult-agree").checked; const data = new FormData(form);
console.log(parentAgree);
if (studentAgree && parentAgree) { console.log(data.get("birthdate"));
document.getElementById('mt-form').hidden = false const birthdate = new Date(data.get("birthdate"));
console.log("WOOHOO"); const age = calculate_age(birthdate);
} data.append("age", age);
else {
document.getElementById('form').hidden = true var xhr = new XMLHttpRequest();
document.getElementById('mt-form').hidden = true xhr.open("POST", "https://n8n.tfcconnection.org/webhook-test/mt-application");
console.log("NEGATORY"); xhr.send(data);
} console.log(data);
} console.log("Hallo!");
document.addEventListener('DOMContentLoaded', process); return false;
}
function calculate_age(dob) {
var diff_ms = Date.now() - dob.getTime();
var age_dt = new Date(diff_ms);
return Math.abs(age_dt.getUTCFullYear() - 1970);
}
function process() {
var studentAgree = document.getElementById("student-agree").checked;
console.log(studentAgree);
var parentAgree = document.getElementById("adult-agree").checked;
console.log(parentAgree);
if (studentAgree && parentAgree) {
document.getElementById('mt-form').hidden = false
console.log("WOOHOO");
}
else {
document.getElementById('form').hidden = true
document.getElementById('mt-form').hidden = true
console.log("NEGATORY");
}
}
document.addEventListener('DOMContentLoaded', process);
</script> </script>
<div class="m-4"> <div class="m-4">
@ -33,7 +58,7 @@
</div> </div>
<div id="mt-form" class="form text-lg w-full"> <div id="mt-form" class="form text-lg w-full">
<form action="" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap"> <form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
<h3 class="basis-full">Mission Trip Application</h3> <h3 class="basis-full">Mission Trip Application</h3>
<div class="basis-full flex flex-wrap my-4"> <div class="basis-full flex flex-wrap my-4">
<label for="firstname" class="basis-full">What is your first and last name?</label> <label for="firstname" class="basis-full">What is your first and last name?</label>
@ -58,15 +83,15 @@
class="basis-full form-input {{ $formClasses }}"> class="basis-full form-input {{ $formClasses }}">
<div class="basis-full my-8"> <div class="basis-full my-8">
<div class=""> <div class="">
<label for="birthday" class="">When were you born?</label> <label for="birthdate" class="">When were you born?</label>
<input type="date" id="birthday" name="birthday" <input type="date" id="birthdate" name="birthdate"
class="form-date {{ $formClasses }}"> class="form-date {{ $formClasses }}">
</div> </div>
<div class=""> <div class="">
<label for="gender" class="">Gender</label> <label for="gender" class="">Gender</label>
<select id="gender" name="gender" class="form-select {{ $formClasses }}"> <select id="gender" name="gender" class="form-select {{ $formClasses }}">
<option value="male">Male</option> <option value="Male">Male</option>
<option value="female">Female</option> <option value="Female">Female</option>
</select> </select>
</div> </div>
</div> </div>
@ -111,7 +136,8 @@
<div class="basis-full my-4"> <div class="basis-full my-4">
<label for="grade" class="">Grade</label> <label for="grade" class="">Grade</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="8"
class="form-input {{ $formClasses }}" checked>
<label for="grade" class="">8th</label> <label for="grade" class="">8th</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="freshman" <input type="radio" id="grade" name="grade" value="freshman"
@ -143,7 +169,7 @@
<label for="churchattendance" class="">Do you attend church regularly?</label> <label for="churchattendance" class="">Do you attend church regularly?</label>
<br/> <br/>
<input type="radio" id="churchattendance" name="churchattendance" <input type="radio" id="churchattendance" name="churchattendance"
value="yes" class="form-input {{ $formClasses }}"> value="yes" class="form-input {{ $formClasses }}" checked>
<label for="churchattendance" class="">Yes</label> <label for="churchattendance" class="">Yes</label>
<br/> <br/>
<input type="radio" id="churchattendance" name="churchattendance" <input type="radio" id="churchattendance" name="churchattendance"
@ -158,14 +184,14 @@
<div class="basis-1/2 flex flex-wrap items-center"> <div class="basis-1/2 flex flex-wrap items-center">
<label for="tfcgroup" class="flex-initial">TFC Group</label> <label for="tfcgroup" class="flex-initial">TFC Group</label>
<select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}"> <select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}">
<option value="phillipsburg">Phillipsburg</option> <option value="Phillipsburg">Phillipsburg</option>
<option value="atwood">Atwood</option> <option value="Atwood">Atwood</option>
<option value="northern-valley">Northern Valley</option> <option value="Northern Valley">Northern Valley</option>
<option value="southern-valley">Southern Valley</option> <option value="Southern Valley">Southern Valley</option>
<option value="thunder-ridge">Thunder Ridge</option> <option value="Thunder Ridge">Thunder Ridge</option>
<option value="logan">Logan</option> <option value="Logan">Logan</option>
<option value="codell">Codell</option> <option value="Codell">Codell</option>
<option value="colby">Colby</option> <option value="Colby">Colby</option>
</select> </select>
</div> </div>
<div class="basis-1/2 flex flex-wrap items-center"> <div class="basis-1/2 flex flex-wrap items-center">
@ -187,6 +213,16 @@
<input type="file" id="image" name="image" <input type="file" id="image" name="image"
class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500"> class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
</div> </div>
<div class="basis-full flex flex-wrap items-center">
<label for="trip" class="basis-full">Which trip would you like to go on?</label>
<select id="trip" name="trip" class="flex-auto form-select {{ $formClasses }}">
<option value="Cary">Cary</option>
<option value="Miriam's Hope">Miriam's Hope</option>
<option value="Homestead/Colorado">Homestead/Colorado</option>
</select>
</div>
<div class="basis-full mt-10"> <div class="basis-full mt-10">
<label for="tripnotes" class="p-4"> <label for="tripnotes" class="p-4">
Do you have any other notes for us regarding this trip? Do you have any other notes for us regarding this trip?
@ -269,15 +305,8 @@
placeholder=""></textarea> placeholder=""></textarea>
</div> </div>
<div class="basis-full"> <div class="basis-full">
<button class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button> <button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
</div> </div>
</form> </form>
</div> </div>
<iframe
id="form"
class="mt-form w-full h-screen"
src="https://tbl.tfcconnection.org/dashboard/#/nc/form/771dc7dc-9a82-49e4-abfe-0fd7b72281f2?embed"
frameborder="0"
style="background: transparent; border: 1px solid #ddd">
</iframe>