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

moving to using htmx and the lisp server on camp forms

Browse source
This commit is contained in:
Chris Cochrun 2024-04-24 08:22:53 -05:00
parent 6034b7764a
commit 22e5161b4c
5 changed files with 298 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
layouts/shortcodes/camp-form.html
View file

@ -1,6 +1,8 @@
{{ $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" }}
{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
<script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.js" crossorigin="anonymous"></script>
<script>
function submitForm(e) {
e.preventDefault();
@ -73,8 +75,8 @@
document.getElementById('warning-agreement').style.margin = '0';
}
/* let base = "http://localhost:4242/camp-form"; */
let base = "https://api.tfcconnection.org/camp-form";
let base = "http://localhost:4242/camp-form";
/* let base = "https://api.tfcconnection.org/camp-form"; */
fetch(base, {
method: "POST",
@ -125,7 +127,7 @@
</script>
<div id="mt-form" class="form text-lg w-full">
<form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
<form id='form' data-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>
<div class="basis-full flex flex-wrap my-4">
<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>
@ -213,11 +215,14 @@
class="basis-full form-input {{ $formClasses }}"
required>
<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 form-input {{ $formClasses }}">
<label for="parentemail" class="basis-full">Guardian's Email
<span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
<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>
</label>
<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 }}">