a full workflow using htmx is finished.
Still needs lots of polish, but it works now.
This commit is contained in:
Chris Cochrun
parent
ba1fdd967e
commit
d653ccdf9f
4 changed files with 506 additions and 460 deletions
|
|
@ -2,129 +2,6 @@
|
|||
{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
|
||||
|
||||
|
||||
<script>
|
||||
function submitForm(e) {
|
||||
e.preventDefault();
|
||||
const form = document.getElementById('form');
|
||||
const data = new FormData(form);
|
||||
|
||||
console.log(data.get("birthdate"));
|
||||
const birthdate = new Date(data.get("birthdate"));
|
||||
const age = calculate_age(birthdate);
|
||||
data.append("age", age);
|
||||
|
||||
if (data.get("parentemail") == "") {
|
||||
document.getElementById('warning-email').style.visibility = 'visible';
|
||||
document.getElementById('warning-email').style.height = '';
|
||||
document.getElementById('warning-email').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-email').style.visibility = 'hidden';
|
||||
document.getElementById('warning-email').style.height = '0';
|
||||
document.getElementById('warning-email').style.margin = '0';
|
||||
}
|
||||
if (data.get("firstname") == "") {
|
||||
document.getElementById('warning-name').style.visibility = 'visible';
|
||||
document.getElementById('warning-name').style.height = '';
|
||||
document.getElementById('warning-name').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-name').style.visibility = 'hidden';
|
||||
document.getElementById('warning-name').style.height = '0';
|
||||
document.getElementById('warning-name').style.margin = '0';
|
||||
}
|
||||
if (data.get("lastname") == "") {
|
||||
document.getElementById('warning-name').style.visibility = 'visible';
|
||||
document.getElementById('warning-name').style.height = '';
|
||||
document.getElementById('warning-name').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-name').style.visibility = 'hidden';
|
||||
document.getElementById('warning-name').style.height = '0';
|
||||
document.getElementById('warning-name').style.margin = '0';
|
||||
}
|
||||
if (data.get("parentfirstname") == "") {
|
||||
document.getElementById('warning-name').style.visibility = 'visible';
|
||||
document.getElementById('warning-name').style.height = '';
|
||||
document.getElementById('warning-name').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-name').style.visibility = 'hidden';
|
||||
document.getElementById('warning-name').style.height = '0';
|
||||
document.getElementById('warning-name').style.margin = '0';
|
||||
}
|
||||
if (data.get("parentlastname") == "") {
|
||||
document.getElementById('warning-name').style.visibility = 'visible';
|
||||
document.getElementById('warning-name').style.height = '';
|
||||
document.getElementById('warning-name').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-name').style.visibility = 'hidden';
|
||||
document.getElementById('warning-name').style.height = '0';
|
||||
document.getElementById('warning-name').style.margin = '0';
|
||||
}
|
||||
if (data.get("final-agreement") == "") {
|
||||
document.getElementById('warning-agreement').style.visibility = 'visible';
|
||||
document.getElementById('warning-agreement').style.height = '';
|
||||
document.getElementById('warning-agreement').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-agreement').style.visibility = 'hidden';
|
||||
document.getElementById('warning-agreement').style.height = '0';
|
||||
document.getElementById('warning-agreement').style.margin = '0';
|
||||
}
|
||||
|
||||
let base = "http://localhost:4242/camp-form";
|
||||
/* let base = "https://api.tfcconnection.org/camp-form"; */
|
||||
|
||||
fetch(base, {
|
||||
method: "POST",
|
||||
body: data
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
if (res.ok) {
|
||||
let payment = data.get('registration');
|
||||
let health = data.get('health');
|
||||
if (health === 'later') {
|
||||
if (payment === 'now')
|
||||
window.location.href = 'https://secure.myvanco.com/L-Z772/campaign/C-13JPJ';
|
||||
else if (payment === 'full')
|
||||
window.location.href = 'https://secure.myvanco.com/L-Z772/campaign/C-13JQE';
|
||||
else
|
||||
window.location.href = '/thankyou/';
|
||||
}
|
||||
else {
|
||||
window.location.href = '/camp-health-form?registration=' + payment;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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() {
|
||||
/* document.getElementById('mt-form').hidden = false */
|
||||
document.getElementById('warning-email').style.visibility = 'hidden';
|
||||
document.getElementById('warning-email').style.height = '0';
|
||||
document.getElementById('warning-email').style.margin = '0';
|
||||
document.getElementById('warning-name').style.visibility = 'hidden';
|
||||
document.getElementById('warning-name').style.height = '0';
|
||||
document.getElementById('warning-name').style.margin = '0';
|
||||
document.getElementById('warning-agreement').style.visibility = 'hidden';
|
||||
document.getElementById('warning-agreement').style.height = '0';
|
||||
document.getElementById('warning-agreement').style.margin = '0';
|
||||
document.getElementById('warning-other').style.visibility = 'hidden';
|
||||
document.getElementById('warning-other').style.height = '0';
|
||||
document.getElementById('warning-other').style.margin = '0';
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', process);
|
||||
</script>
|
||||
|
||||
<div id="mt-form" class="form text-lg w-full">
|
||||
<form id='form' hx-post="http://localhost:4242/camp-api" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
|
||||
<h3 class="basis-full">Camp Form</h3>
|
||||
|
|
@ -132,19 +9,18 @@
|
|||
<label for="firstname" class="basis-full">What is your first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<br/>
|
||||
<input type="text" id="firstname" name="firstname"
|
||||
placeholder="First Name" class="flex-1 form-input {{ $formClasses }}"
|
||||
placeholder="First Name" class="peer flex-1 form-input {{ $formClasses }}"
|
||||
required>
|
||||
<input type="text" id="lastname" name="lastname"
|
||||
placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}"
|
||||
placeholder="Last Name" class="peer flex-1 form-input {{ $formClasses }}"
|
||||
required>
|
||||
</div>
|
||||
<div class="basis-full flex flex-wrap my-4">
|
||||
<label for="parentfirstname" class="basis-full">What is your guardian's first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
|
||||
<label for="parentfirstname" class="basis-full mt-2">What is your guardian's first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<input type="text" id="parentfirstname" name="parentfirstname"
|
||||
class="flex-1 form-input {{ $formClasses }}"
|
||||
class="peer flex-1 form-input {{ $formClasses }}"
|
||||
placeholder="First Name" required>
|
||||
<input type="text" id="parentlastname" name="parentlastname"
|
||||
class="flex-1 form-input {{ $formClasses }}"
|
||||
class="peer flex-1 form-input {{ $formClasses }}"
|
||||
placeholder="Last Name" required>
|
||||
</div>
|
||||
|
||||
|
|
@ -211,17 +87,54 @@
|
|||
|
||||
<label for="parentphone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
|
||||
<input type="tel" id="parentphone" name="parentphone"
|
||||
class="basis-full form-input {{ $formClasses }}"
|
||||
required>
|
||||
class="basis-full peer form-input {{ $formClasses }}
|
||||
invalid:text-[#f39] invalid:ring-[#f39]
|
||||
focus:invalid:ring-[#f39]
|
||||
focus:invalid:border-[#f39]"
|
||||
required pattern="\(?\d{3}\)? ?-?\d{3} ?-?\d{4}"/>
|
||||
|
||||
<label for="parentemail" class="basis-full">Guardian's Email
|
||||
<span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
|
||||
<!-- <div id="warning-phone"
|
||||
class="invisible flex
|
||||
rounded-lg h-0
|
||||
peer-invalid:p-2
|
||||
peer-invalid:visible
|
||||
peer-empty:invisible
|
||||
peer-empty:h-0
|
||||
peer-empty:mb-0
|
||||
peer-invalid:basis-full
|
||||
peer-invalid:mb-32">
|
||||
|
||||
<span class="text-[#f39] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} Make sure you have included a valid phone number for your guardian so we can contact them. Numbers are in the format "999-999-9999 or 0123456789". Make sure to include an area code.
|
||||
</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="basis-full flex flex-wrap">
|
||||
|
||||
<label for="parentemail" class="basis-full">Guardian's Email
|
||||
<span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
|
||||
</label>
|
||||
<input type="parentemail" id="parentemail" name="parentemail"
|
||||
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
|
||||
class="basis-full peer form-input {{ $formClasses }} invalid:text-[#F39] invalid:ring-[#f39] focus:invalid:ring-[#f39] focus:invalid:border-[#f39]">
|
||||
<span class='invisible text-[#f39] text-sm peer-invalid:visibile'>Please use a valid email</span>
|
||||
class="basis-full peer form-input
|
||||
{{ $formClasses }}
|
||||
invalid:text-[#F39]
|
||||
invalid:ring-[#f39]
|
||||
focus:invalid:ring-[#f39]
|
||||
focus:invalid:border-[#f39]">
|
||||
|
||||
</label>
|
||||
<div id="warning-email"
|
||||
class="invisible flex
|
||||
rounded-lg h-0
|
||||
peer-invalid:p-2 peer-invalid:visible
|
||||
peer-invalid:basis-full
|
||||
peer-invalid:mb-24">
|
||||
|
||||
<span class="text-[#f39] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} Make sure you have included an email for your guardian so we can contact them. Emails are in the format "name@website.end".
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<label for="allergies" class="basis-full">Do you have any food allergies?</label>
|
||||
<input type="text" id="allergies" name="allergies"
|
||||
class="basis-full form-input {{ $formClasses }}">
|
||||
|
|
@ -298,34 +211,5 @@
|
|||
<div class="basis-full mt-8">
|
||||
<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 id="warning-email" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
|
||||
Make sure you have included an email for your guardian so we can contact them.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="warning-name" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
|
||||
Make sure that all names are filled out
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="warning-agreement" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
|
||||
You have to agree to the registration information.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="warning-other" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
|
||||
Have you checked to make sure all required fields are filled out?
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue