making the mission trip form forward based on last answers
This commit is contained in:
Chris Cochrun
parent
d34828cf1d
commit
be221e2eec
5 changed files with 381 additions and 141 deletions
|
|
@ -1,129 +1,135 @@
|
|||
{{ $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>
|
||||
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);
|
||||
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("tetanus-shot") === "") {
|
||||
console.warn("NO DATE FOR TETANUS SHOT");
|
||||
data.set("tetanus-shot", "1111-11-11");
|
||||
console.log(data.get("tetanus-shot"));
|
||||
}
|
||||
if (data.get("tetanus-shot") === "") {
|
||||
console.warn("NO DATE FOR TETANUS SHOT");
|
||||
data.set("tetanus-shot", "1111-11-11");
|
||||
console.log(data.get("tetanus-shot"));
|
||||
}
|
||||
|
||||
if (document.getElementById("medical-coverage").checked && data.get("insurance-name") == "") {
|
||||
document.getElementById('warning-insurance').style.visibility = 'visible';
|
||||
document.getElementById('warning-insurance').style.height = '';
|
||||
document.getElementById('warning-insurance').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-insurance').style.visibility = 'hidden';
|
||||
document.getElementById('warning-insurance').style.height = '0';
|
||||
document.getElementById('warning-insurance').style.margin = '0';
|
||||
}
|
||||
if (document.getElementById("medical-coverage").checked && data.get("insurance-name") == "") {
|
||||
document.getElementById('warning-insurance').style.visibility = 'visible';
|
||||
document.getElementById('warning-insurance').style.height = '';
|
||||
document.getElementById('warning-insurance').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-insurance').style.visibility = 'hidden';
|
||||
document.getElementById('warning-insurance').style.height = '0';
|
||||
document.getElementById('warning-insurance').style.margin = '0';
|
||||
}
|
||||
|
||||
if (document.getElementById("medical-coverage").checked && data.get("policy-number") == "") {
|
||||
document.getElementById('warning-policy').style.visibility = 'visible';
|
||||
document.getElementById('warning-policy').style.height = '';
|
||||
document.getElementById('warning-policy').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-policy').style.visibility = 'hidden';
|
||||
document.getElementById('warning-policy').style.height = '0';
|
||||
document.getElementById('warning-policy').style.margin = '0';
|
||||
}
|
||||
if (document.getElementById("medical-coverage").checked && data.get("policy-number") == "") {
|
||||
document.getElementById('warning-policy').style.visibility = 'visible';
|
||||
document.getElementById('warning-policy').style.height = '';
|
||||
document.getElementById('warning-policy').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
document.getElementById('warning-policy').style.visibility = 'hidden';
|
||||
document.getElementById('warning-policy').style.height = '0';
|
||||
document.getElementById('warning-policy').style.margin = '0';
|
||||
}
|
||||
|
||||
if (document.getElementById("medical-coverage").checked && document.getElementById("image").files.length === 0) {
|
||||
document.getElementById('warning-image').style.visibility = 'visible';
|
||||
document.getElementById('warning-image').style.height = '';
|
||||
document.getElementById('warning-image').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
console.warn(document.getElementById("image"));
|
||||
document.getElementById('warning-image').style.visibility = 'hidden';
|
||||
document.getElementById('warning-image').style.height = '0';
|
||||
document.getElementById('warning-image').style.margin = '0';
|
||||
}
|
||||
if (document.getElementById("medical-coverage").checked && document.getElementById("image").files.length === 0) {
|
||||
document.getElementById('warning-image').style.visibility = 'visible';
|
||||
document.getElementById('warning-image').style.height = '';
|
||||
document.getElementById('warning-image').style.margin = '';
|
||||
return false;
|
||||
} else {
|
||||
console.warn(document.getElementById("image"));
|
||||
document.getElementById('warning-image').style.visibility = 'hidden';
|
||||
document.getElementById('warning-image').style.height = '0';
|
||||
document.getElementById('warning-image').style.margin = '0';
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
window.location.href = '/thankyou/';
|
||||
}
|
||||
};
|
||||
xhr.open("POST", "https://n8n.tfcconnection.org/webhook/health-form");
|
||||
xhr.send(data);
|
||||
console.log(data);
|
||||
console.log("Hallo!");
|
||||
/* window.location.replace("https://tfcconnection.org/thankyou/"); */
|
||||
}
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
if (mtRegistration === 'now')
|
||||
window.location.href = '/donate/';
|
||||
else
|
||||
window.location.href = '/thankyou/';
|
||||
}
|
||||
};
|
||||
xhr.open("POST", "https://n8n.tfcconnection.org/webhook/health-form");
|
||||
xhr.send(data);
|
||||
console.log(data);
|
||||
console.log("Hallo!");
|
||||
/* window.location.replace("https://tfcconnection.org/thankyou/"); */
|
||||
}
|
||||
|
||||
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 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 covered = document.getElementById("medical-coverage").checked;
|
||||
console.log(covered);
|
||||
if (covered) {
|
||||
document.getElementById('policy').hidden = false;
|
||||
console.log(document.getElementById('policy'))
|
||||
console.log("WOOHOO");
|
||||
}
|
||||
else {
|
||||
document.getElementById('policy').hidden = true;
|
||||
console.log(document.getElementById('policy'))
|
||||
console.log("NEGATORY");
|
||||
}
|
||||
document.getElementById('warning').style.visibility = 'hidden';
|
||||
document.getElementById('warning-insurance').style.visibility = 'hidden';
|
||||
document.getElementById('warning-policy').style.visibility = 'hidden';
|
||||
document.getElementById('warning-image').style.visibility = 'hidden';
|
||||
document.getElementById('warning').style.height = '0';
|
||||
document.getElementById('warning-insurance').style.height = '0';
|
||||
document.getElementById('warning-policy').style.height = '0';
|
||||
document.getElementById('warning-image').style.height = '0';
|
||||
document.getElementById('warning').style.margin = '0';
|
||||
document.getElementById('warning-insurance').style.margin = '0';
|
||||
document.getElementById('warning-policy').style.margin = '0';
|
||||
document.getElementById('warning-image').style.margin = '0';
|
||||
}
|
||||
function process() {
|
||||
var covered = document.getElementById("medical-coverage").checked;
|
||||
console.log(covered);
|
||||
if (covered) {
|
||||
document.getElementById('policy').hidden = false;
|
||||
console.log(document.getElementById('policy'))
|
||||
console.log("WOOHOO");
|
||||
}
|
||||
else {
|
||||
document.getElementById('policy').hidden = true;
|
||||
console.log(document.getElementById('policy'))
|
||||
console.log("NEGATORY");
|
||||
}
|
||||
document.getElementById('warning').style.visibility = 'hidden';
|
||||
document.getElementById('warning-insurance').style.visibility = 'hidden';
|
||||
document.getElementById('warning-policy').style.visibility = 'hidden';
|
||||
document.getElementById('warning-image').style.visibility = 'hidden';
|
||||
document.getElementById('warning').style.height = '0';
|
||||
document.getElementById('warning-insurance').style.height = '0';
|
||||
document.getElementById('warning-policy').style.height = '0';
|
||||
document.getElementById('warning-image').style.height = '0';
|
||||
document.getElementById('warning').style.margin = '0';
|
||||
document.getElementById('warning-insurance').style.margin = '0';
|
||||
document.getElementById('warning-policy').style.margin = '0';
|
||||
document.getElementById('warning-image').style.margin = '0';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', process);
|
||||
|
||||
function dated() {
|
||||
function nth(d) {
|
||||
if ( d > 3 && d < 21 )
|
||||
return 'th';
|
||||
|
||||
switch (d % 10) {
|
||||
case 1: return "st";
|
||||
case 2: return "nd";
|
||||
case 3: return "rd";
|
||||
default: return "th";
|
||||
};
|
||||
};
|
||||
function dated() {
|
||||
function nth(d) {
|
||||
if ( d > 3 && d < 21 )
|
||||
return 'th';
|
||||
|
||||
switch (d % 10) {
|
||||
case 1: return "st";
|
||||
case 2: return "nd";
|
||||
case 3: return "rd";
|
||||
default: return "th";
|
||||
};
|
||||
};
|
||||
|
||||
const dateObj = new Date();
|
||||
const date = dateObj.getDate();
|
||||
const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][dateObj.getMonth()];
|
||||
const year = dateObj.getFullYear();
|
||||
const dateObj = new Date();
|
||||
const date = dateObj.getDate();
|
||||
const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][dateObj.getMonth()];
|
||||
const year = dateObj.getFullYear();
|
||||
|
||||
let dateString = date+nth(date)+' day of '+month+' '+year;
|
||||
let dateString = date+nth(date)+' day of '+month+' '+year;
|
||||
|
||||
document.getElementById("current_date").innerHTML = dateString;
|
||||
};
|
||||
document.getElementById("current_date").innerHTML = dateString;
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', dated);
|
||||
document.addEventListener('DOMContentLoaded', dated);
|
||||
const myUrl = new URL(window.location.toLocaleString());
|
||||
const mtRegistration = myUrl.searchParams.get('registration');
|
||||
console.log(mtRegistration);
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,18 @@
|
|||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
window.location.href = '/thankyou/';
|
||||
// Logic directing where to send the user after form submission based on results.
|
||||
// This is how to send them. window.location.href = '/thankyou/';
|
||||
|
||||
var payment = document.getElementById('registration').value;
|
||||
if (document.getElementById('health-form-yes').checked)
|
||||
window.location.href = '/mt-health-form?registration=' + payment;
|
||||
else
|
||||
window.location.href = '/thankyou?registration=' + payment;
|
||||
}
|
||||
};
|
||||
xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application");
|
||||
/* xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application"); */
|
||||
xhr.open("POST", "https://n8n.tfcconnection.org/webhook-test/mt-application");
|
||||
xhr.send(data);
|
||||
console.log(data);
|
||||
console.log("Hallo!");
|
||||
|
|
@ -119,13 +127,11 @@
|
|||
<div class="flex-auto flex flex-wrap items-center">
|
||||
<label for="cellphone" class="mr-4">Cell phone</label>
|
||||
<input type="tel" id="cellphone" name="cellphone"
|
||||
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
|
||||
class="flex-auto form-input {{ $formClasses }}">
|
||||
</div>
|
||||
<div class="flex-auto flex flex-wrap items-center">
|
||||
<label for="homephone" class="mr-4">Home phone</label>
|
||||
<input type="tel" id="homephone" name="homephone"
|
||||
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
|
||||
class="flex-auto form-input {{ $formClasses }}">
|
||||
</div>
|
||||
<div class="flex-auto flex flex-wrap items-center">
|
||||
|
|
@ -169,7 +175,7 @@
|
|||
<input type="text" id="pastorlastname" name="pastorlastname"
|
||||
class="flex-auto form-input {{ $formClasses }}"
|
||||
placeholder="Last Name">
|
||||
<input type="text" id="pastorphone" name="pastorphone"
|
||||
<input type="tel" id="pastorphone" name="pastorphone"
|
||||
class="flex-auto form-input {{ $formClasses }}"
|
||||
placeholder="Phone Number">
|
||||
</div>
|
||||
|
|
@ -229,13 +235,36 @@
|
|||
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 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>
|
||||
<label class="basis-full mt-8">Please rank the trips you'd like to go on: 1 being your first choice and 3 being your last choice. If you cannot go on a trip for sure, please use the X.</label>
|
||||
<div class="basis-full grid grid-cols-1 gap-8 lg:grid-cols-3
|
||||
md:grid-cols-1 sm:grid-cols-1 items-center mb-8">
|
||||
<div class="">
|
||||
<label for="trip-1">Miriam's Hope</label>
|
||||
<select id="trip-1" name="trip-1" class="form-select {{ $formClasses }}">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="X">X</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-auto basis-1/3">
|
||||
<label for="trip-2" class="basis-1/2">Cary Mississippi</label>
|
||||
<select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ $formClasses }}">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="X">X</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-auto basis-1/3">
|
||||
<label for="trip-3" class="basis-full">Colorado/Nebraska</label>
|
||||
<select id="trip-3" name="trip-3" class="flex-auto form-select {{ $formClasses }}">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="X">X</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basis-full mt-10">
|
||||
|
|
@ -258,7 +287,7 @@
|
|||
</div>
|
||||
<div class="basis-full mt-10">
|
||||
<label for="testimony" class="p-4">
|
||||
Tell us how your relationship with Jesus began. (How you became a Christian)
|
||||
Tell us how your relationship with Jesus began. (How you became a Christian)
|
||||
</label>
|
||||
<br/>
|
||||
<textarea id="testimony" name="testimony"
|
||||
|
|
@ -267,7 +296,7 @@
|
|||
</div>
|
||||
<div class="basis-full mt-10">
|
||||
<label for="involvement-with-group" class="p-4">
|
||||
In the last year, how have you been involved in the ministry of TFC (or your church/youth group)? How do you benefit your group?
|
||||
In the last year, how have you been involved in the ministry of TFC (or your church/youth group)?
|
||||
</label>
|
||||
<br/>
|
||||
<textarea id="involvement-with-group" name="involvement-with-group"
|
||||
|
|
@ -276,7 +305,7 @@
|
|||
</div>
|
||||
<div class="basis-full mt-10">
|
||||
<label for="reasons-for-trip-choice" class="p-4">
|
||||
Why did you choose the team you applied for as your first choice? (Please indicate if you are unable to a different a trip due to previous commitments.)
|
||||
Why did you choose the team you applied for as your first choice? (Please let us know if you are unable to do any trip due to previous commitments.)
|
||||
</label>
|
||||
<br/>
|
||||
<textarea id="reasons-for-trip-choice" name="reasons-for-trip-choice"
|
||||
|
|
@ -303,7 +332,7 @@
|
|||
</div>
|
||||
<div class="basis-full mt-10">
|
||||
<label for="previous-trip-info" class="p-4">
|
||||
If you were a part of a previous TFC Mission Trip team-tell us how the trip changed your life?
|
||||
If you were a part of a previous TFC Mission Trip team, tell us how the trip changed your life?
|
||||
</label>
|
||||
<br/>
|
||||
<textarea id="previous-trip-info" name="previous-trip-info"
|
||||
|
|
@ -319,12 +348,21 @@
|
|||
class="form-input w-full h-64 {{ $formClasses }}"
|
||||
placeholder=""></textarea>
|
||||
</div>
|
||||
<div class="basis-full my-10">
|
||||
<label for="relevant-notes" class="p-4">
|
||||
Is there anything else you would like to tell us about yourself that might be relevant as we consider you for a mission trip?
|
||||
</label>
|
||||
<br/>
|
||||
<textarea id="relevant-notes" name="relevant-notes"
|
||||
class="form-input w-full h-64 {{ $formClasses }}"
|
||||
placeholder=""></textarea>
|
||||
</div>
|
||||
<label for="registration" class="my-4 basis-full">
|
||||
Would you like to pay the registration fee now or later?
|
||||
</label>
|
||||
<div class="basis-full">
|
||||
<input type="radio" value="now" id="registration" name="registration"
|
||||
class="form-input {{ $formClasses }}">
|
||||
class="form-input {{ $formClasses }}" checked>
|
||||
<label for="registration" class="">
|
||||
Now - $25
|
||||
</label>
|
||||
|
|
@ -336,6 +374,16 @@
|
|||
Later - Send $25 to the TFC Office
|
||||
</label>
|
||||
</div>
|
||||
<label for="health-form" class="basis-full my-4">
|
||||
Would you like to fill out the health form now or later?
|
||||
</label>
|
||||
<div class="basis-full">
|
||||
<input type="radio" id="health-form-yes" name="health-form" class="form-input {{ $formClasses }}" value="true" checked>
|
||||
<label for="health-form" class="">Yes</label>
|
||||
<input type="radio" id="health-form-no" name="health-form" class="form-input {{ $formClasses }}" value="false">
|
||||
<label for="health-form" class="">No</label>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue