Basic implementation event signup
This commit is contained in:
336
modules/event-participants/Templates/register-form.php
Normal file
336
modules/event-participants/Templates/register-form.php
Normal file
@ -0,0 +1,336 @@
|
||||
<form id="registration_form" method="post" action="{{URL}}" onsubmit="return validationCheck()">
|
||||
<input type="hidden" name="eventId" value="{{eventId}}" />
|
||||
<div class="step" id="step1">
|
||||
{{altersstufe}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step2">
|
||||
<h3>Persönliche Daten (Eltern)</h3>
|
||||
{{persönliche daten eltern}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step3">
|
||||
<h3>Persönliche Daten (Teili)</h3>
|
||||
{{persönliche daten}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step4">
|
||||
<h3>Deine Teilnahme</h3>
|
||||
{{gruppe}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step5">
|
||||
<h3>An- und Abreise</h3>
|
||||
{{anreise}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step6">
|
||||
<h3>Beitrag</h3>
|
||||
{{beitrag}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step7">
|
||||
<h3>Foto-Erlaubnis</h3>
|
||||
{{fotoerlaubnis}}
|
||||
</div>
|
||||
|
||||
<div class="step" id="step8">
|
||||
<h3>Besondere Merkmale</h3>
|
||||
{{allergien}}
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.step h3 {
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#registration_form {
|
||||
color: #000000;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#registration_form input[type=button],
|
||||
#registration_form input[type=submit]
|
||||
{
|
||||
background-color: #ffffff;
|
||||
width: 125px;
|
||||
padding: 10px;
|
||||
border-style: solid;
|
||||
border-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#registration_form input[type="button"]:hover,
|
||||
#registration_form input[type="submit"]:hover
|
||||
{
|
||||
color: #ffffff;
|
||||
background-color: #394993;
|
||||
}
|
||||
|
||||
#registration_form table {
|
||||
width: 100%;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
#registration_form table td:nth-child(1) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#registration_form table td:nth-child(2){
|
||||
width: 80%;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#registration_form table td {
|
||||
|
||||
}
|
||||
|
||||
#registration_form table td input,
|
||||
#registration_form table td select,
|
||||
#registration_form table td textarea
|
||||
{
|
||||
|
||||
width: 350px;
|
||||
background-color: #ffffff;
|
||||
border-color: #c0c0c0;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
font-size: 14pt;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#registration_form label
|
||||
{
|
||||
font-size: 12pt;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#registration_form table td select {
|
||||
width: 363px;
|
||||
}
|
||||
|
||||
.emblems_selection {
|
||||
widh: 100%;
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-style: solid none none;
|
||||
border-width: 1px;
|
||||
border-color: #c0c0c0;
|
||||
}
|
||||
|
||||
.altersstufe_td {
|
||||
display: inline-block;
|
||||
box-shadow: 5px 5px 10px #c0c0c0;
|
||||
background-color: #f9f9f9;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.altersstufe_td div
|
||||
{
|
||||
height: 50px;
|
||||
padding: 0px 10px !important;
|
||||
}
|
||||
|
||||
.dsgvo_error {
|
||||
color: #a94442;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.altersstufe_td {
|
||||
display: block;
|
||||
margin: 0 auto 25px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#registration_form table td input,
|
||||
#registration_form table td select,
|
||||
#registration_form table td textarea
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#strasse {
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
#ort {
|
||||
width: 608% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let currentStep = 1;
|
||||
const form = document.getElementById('multi-step-form');
|
||||
const steps = document.querySelectorAll('.step');
|
||||
|
||||
function checkAnsprechpartner() {
|
||||
var errors = false;
|
||||
|
||||
var ids = ['ansprechpartner', 'telefon_2','email_2'];
|
||||
|
||||
for (var idx = 0; idx < ids.length; idx++) {
|
||||
var currentElement = ids[idx];
|
||||
|
||||
if (document.getElementById(currentElement).value == '') {
|
||||
document.getElementById(currentElement).style.backgroundColor = "#fd9393";
|
||||
document.getElementById(currentElement).style.color = "red";
|
||||
errors = true;
|
||||
} else {
|
||||
document.getElementById(currentElement).style.backgroundColor = "#ffffff";
|
||||
document.getElementById(currentElement).style.color = "#c0c0c0";
|
||||
}
|
||||
}
|
||||
|
||||
if (!errors) {
|
||||
showStep(3);
|
||||
}
|
||||
}
|
||||
|
||||
function checkAnreise() {
|
||||
var errors = false;
|
||||
|
||||
var ids = ['anreise', 'abreise'];
|
||||
|
||||
for (var idx = 0; idx < ids.length; idx++) {
|
||||
var currentElement = ids[idx];
|
||||
|
||||
if (document.getElementById(currentElement).value == '') {
|
||||
document.getElementById(currentElement).style.backgroundColor = "#fd9393";
|
||||
document.getElementById(currentElement).style.color = "red";
|
||||
errors = true;
|
||||
} else {
|
||||
document.getElementById(currentElement).style.backgroundColor = "#ffffff";
|
||||
document.getElementById(currentElement).style.color = "#c0c0c0";
|
||||
}
|
||||
}
|
||||
|
||||
if (errors)
|
||||
return;
|
||||
|
||||
var anreise = new Date(document.getElementById('anreise').value);
|
||||
var abreise = new Date(document.getElementById('abreise').value);
|
||||
|
||||
if(abreise < anreise) {
|
||||
document.getElementById('anreise').style.backgroundColor = "#fd9393";
|
||||
document.getElementById('anreise').style.color = "red";
|
||||
document.getElementById('abreise').style.backgroundColor = "#fd9393";
|
||||
document.getElementById('abreise').style.color = "red";
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if(anreise < new Date('{{startdate}}')) {
|
||||
document.getElementById('anreise').style.backgroundColor = "#fd9393";
|
||||
document.getElementById('anreise').style.color = "red";
|
||||
errors = true;
|
||||
} else {
|
||||
document.getElementById('anreise').style.backgroundColor = "#ffffff";
|
||||
document.getElementById('anreise').style.color = "#c0c0c0";
|
||||
}
|
||||
|
||||
if(abreise > new Date('{{enddate}}')) {
|
||||
document.getElementById('abreise').style.backgroundColor = "#fd9393";
|
||||
document.getElementById('abreise').style.color = "red";
|
||||
errors = true;
|
||||
} else {
|
||||
document.getElementById('abreise').style.backgroundColor = "#ffffff";
|
||||
document.getElementById('abreise').style.color = "#c0c0c0";
|
||||
}
|
||||
|
||||
if (!errors) {
|
||||
showStep(6);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkAddress() {
|
||||
var errors = false;
|
||||
|
||||
var ids = ['vorname', 'nachname','geburtsdatum', 'telefon_1', 'email_1', 'strasse', 'hausnummer', 'plz', 'ort'];
|
||||
|
||||
for (var idx = 0; idx < ids.length; idx++) {
|
||||
var currentElement = ids[idx];
|
||||
|
||||
if (document.getElementById(currentElement).value == '') {
|
||||
document.getElementById(currentElement).style.backgroundColor = "#fd9393";
|
||||
document.getElementById(currentElement).style.color = "red";
|
||||
errors = true;
|
||||
} else {
|
||||
document.getElementById(currentElement).style.backgroundColor = "#ffffff";
|
||||
document.getElementById(currentElement).style.color = "#c0c0c0";
|
||||
}
|
||||
}
|
||||
|
||||
if (!errors) {
|
||||
showStep(4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showStep(stepNumber) {
|
||||
steps.forEach(step => step.style.display = 'none');
|
||||
document.getElementById(`step${stepNumber}`).style.display = 'block';
|
||||
}
|
||||
|
||||
function nextStep() {
|
||||
if (currentStep < steps.length) {
|
||||
currentStep++;
|
||||
showStep(currentStep);
|
||||
}
|
||||
}
|
||||
|
||||
function validationCheck()
|
||||
{
|
||||
if (!document.getElementById('dsgvo_accept').checked) {
|
||||
document.getElementById('dsgvo_text').classList.add('dsgvo_error');
|
||||
}
|
||||
var ids = ['vorname', 'nachname','geburtsdatum', 'telefon_1', 'email_1', 'anreise', 'abreise', 'strasse', 'hausnummer', 'plz', 'ort'];
|
||||
|
||||
for (var idx = 0; idx < ids.length; idx++) {
|
||||
var currentElement = ids[idx];
|
||||
if (document.getElementById(currentElement).value == '') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
var anreise = new Date(document.getElementById('anreise').value);
|
||||
var abreise = new Date(document.getElementById('abreise').value);
|
||||
|
||||
if(anreise < new Date('{{startdate}}')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if(abreise > new Date('{{enddate}}')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!document.getElementById('dsgvo_accept').checked) {
|
||||
document.getElementById('dsgvo_text').classList.add('dsgvo_error');
|
||||
}
|
||||
|
||||
return document.getElementById('dsgvo_accept').checked;
|
||||
|
||||
|
||||
}
|
||||
|
||||
showStep(currentStep);
|
||||
</script>
|
||||
Reference in New Issue
Block a user