a full workflow using htmx is finished.

Still needs lots of polish, but it works now.
This commit is contained in:
Chris Cochrun 2024-04-25 06:36:38 -05:00
parent ba1fdd967e
commit d653ccdf9f
4 changed files with 506 additions and 460 deletions

View file

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