mirror of
https://codeberg.org/angestoepselt/refund-form.git
synced 2025-05-24 14:46:16 +00:00
webform refund
This commit is contained in:
Matthias
parent
2511734a1c
commit
f60d1f1fab
11 changed files with 424 additions and 0 deletions
79
assets/css/main.css
Normal file
79
assets/css/main.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.form-leistung {
|
||||
width: calc(100% + 25px);
|
||||
left: 0;
|
||||
right: -25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
#form-leistung .btn-minus {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.btn-plus,
|
||||
.btn-minus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #cfd4da;
|
||||
border-radius: 3px;
|
||||
padding: 0px 0 0 2px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.btn-minus {
|
||||
right: 0;
|
||||
top: calc(50% - 11px);
|
||||
padding: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.btn-minus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-leistung:hover .btn-minus {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#form-iban {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#html {
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
#html span {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
#html > div {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#html .leistungen {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#html .leistungen span {
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#html #betrag div,
|
||||
#html #gesamt {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
BIN
assets/img/210210_angestöpselt_logo_final_web.jpg
Normal file
BIN
assets/img/210210_angestöpselt_logo_final_web.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
151
assets/js/main.js
Normal file
151
assets/js/main.js
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
$(document).ready(function() {
|
||||
/* Get form data on print page */
|
||||
var url = window.location.href;
|
||||
var str = 'print';
|
||||
if(url.includes(str)) {
|
||||
if (localStorage.getItem('name') !== null) {
|
||||
getFormData();
|
||||
} else {
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
}
|
||||
|
||||
/* Clone services input on plus and remove on minus button click */
|
||||
var count = 1;
|
||||
$('.btn-plus').on('click', function() {
|
||||
var html='' +
|
||||
'<div id="form-leistung_' + count + '" class="form-leistung position-relative mb-3">' +
|
||||
'<div class="row">' +
|
||||
'<div class="col col-10">' +
|
||||
'<input id="leistung_' + count + '" name="leistung_' + count + '" type="text" class="leistung form-control">' +
|
||||
'</div>' +
|
||||
'<div class="col col-2">' +
|
||||
'<input id="betrag_' + count + '" name="betrag_' + count + '" type="text" class="betrag form-control">' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<button onclick=remove("' + count + '") class="btn-minus position-absolute">−</button>' +
|
||||
'</div>';
|
||||
$("#form-leistung-wrapper").append(html);
|
||||
|
||||
count++;
|
||||
})
|
||||
|
||||
|
||||
/* Get total amount */
|
||||
$(document).on('change', '.form-leistung .betrag', function(){
|
||||
$('#gesamt').val(getTotal());
|
||||
});
|
||||
$(document).on('click', '.btn-minus', function(){
|
||||
$('#gesamt').val(getTotal());
|
||||
});
|
||||
|
||||
|
||||
/* Show iban field if checkbox is checked, hide if unchecked */
|
||||
if ($('input#auszahlung').prop('checked')) {
|
||||
$('#form-iban').fadeIn();
|
||||
} else {
|
||||
$('#form-iban').fadeOut();
|
||||
}
|
||||
|
||||
$('input#auszahlung').change(function() {
|
||||
if ($(this).prop('checked')) {
|
||||
$('#form-iban').fadeIn();
|
||||
} else {
|
||||
$('#form-iban').fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
$('.btn-continue').on('click', function() {
|
||||
validate();
|
||||
})
|
||||
});
|
||||
|
||||
function remove(which) {
|
||||
$("#form-leistung_" + which).remove();
|
||||
}
|
||||
|
||||
function getTotal() {
|
||||
var total = 0;
|
||||
$.each($('.form-leistung .betrag'), function(index, item) {
|
||||
total += parseFloat($(item).val().replace(',', '.'));
|
||||
});
|
||||
|
||||
return Number(total).toFixed(2);
|
||||
}
|
||||
|
||||
function storeFormData() {
|
||||
console.log("here");
|
||||
var name = $('#name').val();
|
||||
var adresse = $('#adresse').val();
|
||||
var leistung = {};
|
||||
var betrag = {};
|
||||
$('.form-leistung').each(function(index, item) {
|
||||
leistung[index] = $(item).find('.leistung').val();
|
||||
betrag[index] = $(item).find('.betrag').val();
|
||||
|
||||
localStorage.setItem('leistung', JSON.stringify(leistung));
|
||||
localStorage.setItem('betrag', JSON.stringify(betrag));
|
||||
})
|
||||
|
||||
localStorage.setItem('name', name);
|
||||
localStorage.setItem('adresse', adresse);
|
||||
|
||||
var gesamt = $('#gesamt').val();
|
||||
localStorage.setItem('gesamt', gesamt);
|
||||
|
||||
if($("#verzicht").is(':checked')) {
|
||||
localStorage.setItem('verzicht', 1);
|
||||
}
|
||||
|
||||
if($("#auszahlung").is(':checked')) {
|
||||
var iban = $('#iban').val();
|
||||
|
||||
localStorage.setItem('auszahlung', 1);
|
||||
localStorage.setItem('iban', iban);
|
||||
}
|
||||
|
||||
window.location.href = 'print.html';
|
||||
}
|
||||
|
||||
function getFormData() {
|
||||
var name = localStorage.getItem('name');
|
||||
var adresse = localStorage.getItem('adresse');
|
||||
var verzicht = localStorage.getItem('verzicht');
|
||||
var auszahlung = localStorage.getItem('auszahlung');
|
||||
var iban = localStorage.getItem('iban');
|
||||
var gesamt = localStorage.getItem('gesamt');
|
||||
|
||||
$('#name').text(name);
|
||||
$('#adresse').text(adresse);
|
||||
|
||||
var leistung = JSON.parse(localStorage.getItem('leistung'));
|
||||
var betrag = JSON.parse(localStorage.getItem('betrag'));
|
||||
|
||||
for(var k1 in leistung) {
|
||||
$('#leistung').append('<div>' + leistung[k1] + '</div>');
|
||||
}
|
||||
|
||||
for(var k2 in betrag) {
|
||||
$('#betrag').append('<div>' + betrag[k2] + ' \u20AC' + '</div>');
|
||||
}
|
||||
|
||||
$('#gesamt').text(gesamt.replace('.', ',') + ' \u20AC');
|
||||
|
||||
if(verzicht == 1) {
|
||||
$('#verzicht').text('Ich verzichte auf die Erstattung des Betrages und spende ihn stattdessen');
|
||||
}
|
||||
|
||||
if(auszahlung == 1) {
|
||||
$('#auszahlung').text('Ich bitte um Auszahlung des Betrages per Banküberweisung auf mein Konto:');
|
||||
$('#iban').text(iban);
|
||||
}
|
||||
}
|
||||
|
||||
function validate() {
|
||||
let valid = true;
|
||||
$('[required]').each(function() {
|
||||
if ($(this).is(':invalid') || !$(this).val()) valid = false;
|
||||
})
|
||||
if (!valid) alert('Bitte alle Pflichtfelder ausfüllen')
|
||||
else storeFormData();
|
||||
}
|
||||
7
assets/vendor/bootstrap/css/bootstrap.min.css
vendored
Normal file
7
assets/vendor/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/vendor/bootstrap/css/bootstrap.min.css.map
vendored
Normal file
1
assets/vendor/bootstrap/css/bootstrap.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
7
assets/vendor/bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
7
assets/vendor/bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/vendor/bootstrap/js/bootstrap.bundle.min.js.map
vendored
Normal file
1
assets/vendor/bootstrap/js/bootstrap.bundle.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
assets/vendor/jquery/jquery-3.6.0.min.js
vendored
Normal file
2
assets/vendor/jquery/jquery-3.6.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/vendor/jquery/jquery-3.6.0.min.map
vendored
Normal file
1
assets/vendor/jquery/jquery-3.6.0.min.map
vendored
Normal file
File diff suppressed because one or more lines are too long
94
index.html
Normal file
94
index.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bestätigung von Auslagen</title>
|
||||
|
||||
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/css/main.css" rel="stylesheet">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<div class="container">
|
||||
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center mb-4 mb-md-0 ms-md-auto text-dark text-decoration-none">
|
||||
<img src="assets/img/210210_angestöpselt_logo_final_web.jpg" alt="Angestöpselt" title="Angestöpselt" width="400" height="62.5">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="row">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col col-12 col-lg-8">
|
||||
<h1>Bestätigung von Auslagen</h1>
|
||||
|
||||
<div class="mt-5">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<label for="name" class="form-label">Name *</label>
|
||||
<input id="name" name="name" type="text" class="form-control" required="required" />
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="adresse" class="form-label">Adresse *</label>
|
||||
<textarea id="adresse" name="adresse" cols="40" rows="2" class="form-control" required="required"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Erbrachte Leistungen</label>
|
||||
<div id="form-leistung-wrapper">
|
||||
<div id="form-leistung" class="form-leistung position-relative mb-3">
|
||||
<div class="row">
|
||||
<div class="col col-10">
|
||||
<input id="leistung_0" name="leistung_0" type="text" class="leistung form-control" />
|
||||
</div>
|
||||
<div class="col col-2">
|
||||
<input id="betrag_0" name="betrag_0" type="text" class="betrag form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="btn-minus position-absolute">−</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-2 ms-auto">
|
||||
<input id="gesamt" name="gesamt" type="text" class="form-control" readonly="readonly" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="btn-plus ms-auto mt-3">＋</span>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-4">
|
||||
<input name="verzicht" id="verzicht" type="checkbox" class="form-check-input" value="verzicht" />
|
||||
<label for="verzicht" class="form-check-label">Ich verzichte auf die Erstattung des Betrages und spende ihn stattdessen</label>
|
||||
</div>
|
||||
<div class="form-check mb-4">
|
||||
<input name="auszahlung" id="auszahlung" type="checkbox" class="form-check-input" value="auszahlung" />
|
||||
<label for="auszahlung" class="form-check-label">Ich bitte um Auszahlung des Betrages per Banküberweisung auf mein Konto:</label>
|
||||
</div>
|
||||
<div id="form-iban" class="form-group mb-4">
|
||||
<label for="iban" class="form-label">IBAN</label>
|
||||
<input id="iban" name="iban" type="text" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="btn btn-primary btn-continue">Weiter</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script src="assets/vendor/jquery/jquery-3.6.0.min.js"></script>
|
||||
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
81
print.html
Normal file
81
print.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bestätigung von Auslagen</title>
|
||||
|
||||
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/css/main.css" rel="stylesheet">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<div class="container">
|
||||
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center mb-4 mb-md-0 ms-md-auto text-dark text-decoration-none">
|
||||
<img src="assets/img/210210_angestöpselt_logo_final_web.jpg" alt="Angestöpselt" title="Angestöpselt" width="400" height="62.5">
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="row">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col col-12 col-lg-8">
|
||||
<h1>Bestätigung von Auslagen</h1>
|
||||
|
||||
<div class="mt-5">
|
||||
<div id="html" class="mb-5">
|
||||
<div>
|
||||
<span>Name:</span>
|
||||
<div id="name"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>Adresse:</span>
|
||||
<div id="adresse"></div>
|
||||
</div>
|
||||
|
||||
<div class="leistungen">
|
||||
<span>Leistungen:</span>
|
||||
<div class="row">
|
||||
<div class="col col-10">
|
||||
<div id="leistung"></div>
|
||||
</div>
|
||||
<div class="col col-2">
|
||||
<div id="betrag"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Gesamt:</span>
|
||||
<div class="row">
|
||||
<div class="col col-10 offset-2">
|
||||
<div id="gesamt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="verzicht"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="auszahlung"></div>
|
||||
<div id="iban"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary no-print" onclick="window.print();">Drucken</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script src="assets/vendor/jquery/jquery-3.6.0.min.js"></script>
|
||||
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue