306 lines
10 KiB
HTML
306 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de"><head>
|
|
<meta charset="utf-8">
|
|
<title>Termine Verkehrsakadmie Franken</title>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
|
|
|
|
<!-- FONT -->
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
|
|
|
|
<!-- User CSS -->
|
|
<link rel="stylesheet" href="style/default.css">
|
|
<link rel="stylesheet" href="style/bidat.css">
|
|
<link rel="stylesheet" href="style/font-awesome.min.css">
|
|
|
|
<style>@media print {#ghostery-purple-box {display:none !important}}</style></head>
|
|
<body id="bidat">
|
|
|
|
<article id="bidat-event-registration">
|
|
|
|
<header>
|
|
<h2>Anmeldung für: Modul 1 Wirtschaftliches Fahren Kombimodul KOM/LKW</h2>
|
|
</header>
|
|
|
|
<div class="infoblock">
|
|
<div class="table">
|
|
<div class="row">
|
|
<div class="col-3 ch">
|
|
Beginn
|
|
</div>
|
|
<div class="col-9">
|
|
<time itemprop="startDate" datetime="2019-02-18T09:00:00+01:00">18. Februar 2019 - 09:00</time>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-3 ch">
|
|
Ende
|
|
</div>
|
|
<div class="col-9">
|
|
<time itemprop="startDate" datetime="2019-02-18T17:00:00+01:00">18. Februar 2019 - 17:00</time>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-3 ch">Max. TN</div>
|
|
<div class="col-9">16</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-3 ch">aktuell TN</div>
|
|
<div class="col-9">1</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-3 ch">Freie Plätze</div>
|
|
<div class="col-9">15</div>
|
|
</div>
|
|
</div>
|
|
<details>
|
|
<h3>Eco-Fahren, Das Perfektionstraining</h3><br><ul class="sdw_liste"><li>Das Modul 1 ist ein Kombinationsmodul, das Inhalte für beide Führerscheinklassen vermittelt.</li><li>Die Kennziffern für dieses Modul sind: 1.1, 1.2, 1.3</li></ul> </details>
|
|
</div>
|
|
|
|
|
|
|
|
<section class='form'>
|
|
|
|
<form id="needs-validation" class="needs-validation" action="index.php?register=872" method="post">
|
|
<input type="hidden" name="de_stattbuchung_event_Modul" value="5132134" required="">
|
|
<input type="hidden" name="tnvoll" value="1" required="">
|
|
|
|
<div class="formrow">
|
|
<label>Anrede <i class="fa fa-star"></i></label>
|
|
<input list="anrede" placeholder="Anrede auswählen" name="anrede" allowautofill="no" required="">
|
|
<datalist id="anrede">
|
|
<option value="Herr"> </option>
|
|
<option value="Frau"> </option>
|
|
</datalist>
|
|
</div>
|
|
<div class="formrow">
|
|
<label>Vorname <i class="fa fa-star"></i></label>
|
|
<input type="text" id="vorname" name="vorname" required="">
|
|
</div>
|
|
<div class="formrow">
|
|
<label>Nachname <i class="fa fa-star"></i></label>
|
|
<input type="text" id="nachname" name="nachname" required="">
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
<label>Geburtsdatum <i class="fa fa-star"></i></label>
|
|
|
|
<input type="text" name="geburtsdatum" id="geb_datum" value="" class="input-large validate[required]" placeholder="TT.MM.JJJJ" pattern="^[0-3]{1}[0-9]{1}\.[0-3]{1}[0-9]{1}\.[1-2]{1}[0-9]{1}[0-9]{2}$" message="Bitte geben Sie ein korrektes Datum ein" required="true">
|
|
</div>
|
|
<div class="formrow">
|
|
<label> Geburtsort <i class="fa fa-star"></i></label>
|
|
<input type="text" name="geburtsort" id="geb_ort" value="" class="input-large validate[required]" required="true">
|
|
</div>
|
|
|
|
|
|
<div class="formrow">
|
|
<label>Email <i class="fa fa-star"></i></label>
|
|
<input type="text" id="email" name="email" required="">
|
|
</div>
|
|
<div class="formrow">
|
|
<label>Telefon <i class="fa fa-star"></i></label>
|
|
<input type="text" name="telefon" id="telefon" value="" class="input-large validate[required]" required="true"> </div>
|
|
<div class="formrow">
|
|
<label>Firma / Organisation </label>
|
|
<input type="text" name="organization" id="organization" value="" class="input-large">
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
<label>Strasse <i class="fa fa-star"></i></label>
|
|
<input type="text" id="strasse" name="strasse" required="">
|
|
</div>
|
|
<div class="formrow">
|
|
<label>PLZ <i class="fa fa-star"></i></label>
|
|
<input type="text" id="plz" name="plz" required="">
|
|
</div>
|
|
<div class="formrow">
|
|
<label>Ort <i class="fa fa-star"></i></label>
|
|
<input type="text" id="ort" name="ort" required="">
|
|
</div>
|
|
<div class="formrow">
|
|
<label class="form-check-label" for="datenschutz">Ich stimme den Datenschutzbestimmungen zu </label>
|
|
<input type="checkbox" class="form-check-input" id="datenschutz" required="">
|
|
</div>
|
|
<div class="formrow">
|
|
<label for="kommentar">Bemerkung </label> <textarea class="form-control bidat_textarea" id="kommentar" name="kommentar" rows="3"> </textarea>
|
|
</div>
|
|
|
|
|
|
|
|
<div class='tnartliste' freitn='15'>
|
|
<div>Bitte geben Sie die gewünschte Anzahl von Tickets ein</div>
|
|
<div class="formrow">
|
|
<label>Vollpreise (12,00 €) <i class="fa fa-star"></i></label>
|
|
<input type="text" class='tnart' price='12.00' beschriftung='Ticket Vollpreis' id="tnart1" name="ort" required="">
|
|
<div class='alertbox' style='display:none'></div>
|
|
|
|
</div>
|
|
<div class="formrow">
|
|
<label>Ermäßigt (10,00 €) <i class="fa fa-star"></i></label>
|
|
<input type="text" class='tnart' price='10.00' beschriftung ='Ticket Ermäßigt' id="tnart2" name="ort" required="">
|
|
<div class='alertbox' style='display:none'></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="formrow submitrow">
|
|
<button type="submit" class="btn btn-primary">Anmeldung abschicken </button>
|
|
<button type="button" class="btn btn-secondary" name="btnBack" value="Zurück" onclick="window.history.go(-1);">Zurück</button>
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</section>
|
|
<aside>
|
|
<div class='warenkorb' style='display:none'>
|
|
<h1>Warenkorb</h1>
|
|
<div class='table table-striped'>
|
|
<div class="tnart row headrow">
|
|
<div class="tnart ntart1 titel col-4 th"> Ticket
|
|
</div>
|
|
<div class="tnart ntart1 anzahl col th text-center" >Anzahl
|
|
</div>
|
|
<div class="tnart ntart1 sum col th text-right" >Preis
|
|
</div>
|
|
</div>
|
|
<div class="tnart tnart1 row" style='display:none'>
|
|
<div class="tnart ntart1 titel col-4" id='tnart1_label'>
|
|
</div>
|
|
<div class="tnart ntart1 anzahl col text-center" id='tnart1_amount'>
|
|
</div>
|
|
<div class="tnart ntart1 sum col text-right" id='tnart1_sum'>
|
|
</div>
|
|
</div>
|
|
<div class="tnart tnart2 row" style='display:none'>
|
|
<div class="tnart titel col-4" id='tnart2_label'>
|
|
</div>
|
|
<div class="tnart tnart2 anzahl col text-center" id='tnart2_amount'>
|
|
</div>
|
|
<div class="tnart tnart2 sum col text-right" id='tnart2_sum'>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='sumrow row'>
|
|
<div class='col'>Gesamt</div>
|
|
<div class='col text-center' id='amount'></div>
|
|
<div class='col text-right' id='summe'></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
</article>
|
|
|
|
|
|
<script>
|
|
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
(function() {
|
|
'use strict';
|
|
window.addEventListener('load', function() {
|
|
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
|
var forms = document.getElementsByClassName('needs-validation');
|
|
// Loop over them and prevent submission
|
|
var validation = Array.prototype.filter.call(forms, function(form) {
|
|
form.addEventListener('submit', function(event) {
|
|
if (form.checkValidity() === false) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
});
|
|
}, false);
|
|
})();
|
|
</script>
|
|
|
|
|
|
<script src="style/jquery-3.3.1.min.js"></script>
|
|
<script>
|
|
|
|
|
|
function formatCurrency(total) {
|
|
var neg = false;
|
|
if(total < 0) {
|
|
neg = true;
|
|
total = Math.abs(total);
|
|
}
|
|
return (neg ? "- " : '') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString().replace('.',',')+' €';
|
|
}
|
|
|
|
function update(event) {
|
|
console.log("-->Funktion Update");
|
|
let sum = 0.0;
|
|
let sumAmount = 0.0;
|
|
$('input.tnart').each(
|
|
function () {
|
|
console.log("-->AddItem");
|
|
console.error($(this));
|
|
let rowamount = $(this).val();
|
|
let rowsum = (rowamount*$(this).attr('price'));
|
|
sum += rowsum;
|
|
sumAmount += Number(rowamount);
|
|
console.log('Class'+$(this).attr('id'));
|
|
$('#'+$(this).attr('id')+'_label').html($(this).attr('beschriftung'));
|
|
$('#'+$(this).attr('id')+'_amount').html(rowamount);
|
|
$('#'+$(this).attr('id')+'_sum').html(formatCurrency(rowsum));
|
|
|
|
if(rowamount >0 ) $('div.'+$(this).attr('id')).slideDown("slow");
|
|
else $('div.'+$(this).attr('id')).slideUp("fast");
|
|
|
|
});
|
|
console.log('SumAmount: '+Number(sumAmount));
|
|
|
|
console.log('Freitn: '+(Number($('.tnartliste').attr('freitn')))<15);
|
|
if(Number(sumAmount) > Number($('.tnartliste').attr('freitn'))) {
|
|
console.log("Error too big");
|
|
|
|
let correctBy =sumAmount-$('.tnartliste').attr('freitn');
|
|
let newAmount =$(event.currentTarget).val()-correctBy;
|
|
$(event.currentTarget).val(newAmount);
|
|
sumAmount -= correctBy;
|
|
sum -= correctBy*$(event.currentTarget).attr('price');
|
|
//$(this).setVal($(this).val()- $('.tnartliste').attr('freitn')-sumAmount);
|
|
console.log("Alertbox");
|
|
|
|
console.error($('.alertbox'));
|
|
$(event.currentTarget).next('.alertbox').html('Die maximal verfügbare Anzahl von Karten liegt derzeit bei '+$('.tnartliste').attr('freitn')+"<br>Ihre Eingabe wurde entsprechend korrigiert.").slideDown("slow");
|
|
|
|
update();
|
|
|
|
}
|
|
console.error(sum);
|
|
if(sum > 0) {
|
|
$('#summe').html(formatCurrency(sum));
|
|
$('#amount').html(sumAmount);
|
|
$('.warenkorb').slideDown("slow");
|
|
}
|
|
|
|
console.log("<--Funktion Update");
|
|
}
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
$('input.tnart').each(function () {
|
|
$(this).on('keyup',event => {
|
|
$(event.currentTarget).next('.alertbox').hide();
|
|
update(event)});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<div> <br> <br> <br></div>
|
|
|
|
|
|
|
|
|
|
</body></html> |