Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo
This commit is contained in:
commit
1e61ee7223
@ -30,3 +30,23 @@ document.getElementById('donationForm').addEventListener('submit', function(even
|
|||||||
alert('Alles in Ordnung. Vielen Dank für Ihre Spende!');
|
alert('Alles in Ordnung. Vielen Dank für Ihre Spende!');
|
||||||
this.reset(); // Setzt das Formular zurück
|
this.reset(); // Setzt das Formular zurück
|
||||||
});
|
});
|
||||||
|
// Für Preis
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
updatePrice(); // Initialer Preis wird beim Laden der Seite gesetzt
|
||||||
|
});
|
||||||
|
|
||||||
|
function updatePrice() {
|
||||||
|
const fresserchenSelect = document.getElementById('Fresserchen');
|
||||||
|
const mengeSelect = document.getElementById('Menge');
|
||||||
|
const priceInput = document.getElementById('Preis');
|
||||||
|
const selectedFood = fresserchenSelect.options[fresserchenSelect.selectedIndex];
|
||||||
|
const pricePerUnit = selectedFood.getAttribute('data-price');
|
||||||
|
const quantity = mengeSelect.value;
|
||||||
|
const total = pricePerUnit * quantity;
|
||||||
|
priceInput.value = total.toFixed(2); // Preis wird im Preisfeld angezeigt
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDonationAmount() {
|
||||||
|
const priceInput = document.getElementById('Preis').value;
|
||||||
|
alert('Danke für deine Spende von €' + priceInput + '!');
|
||||||
|
}
|
||||||
|
28
index.html
28
index.html
@ -92,7 +92,7 @@
|
|||||||
<section id="patenshop" class="container-fluid">
|
<section id="patenshop" class="container-fluid">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<form class="row g-3">
|
<form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<label for="inputFirstName" class="form-label">Name</label>
|
<label for="inputFirstName" class="form-label">Name</label>
|
||||||
<input type="text" class="form-control" id="inputFirstName">
|
<input type="text" class="form-control" id="inputFirstName">
|
||||||
@ -111,31 +111,27 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<label for="Fresserchen" class="form-label">Fresserchen</label>
|
<label for="Fresserchen" class="form-label">Fresserchen</label>
|
||||||
<select id="Fresserchen" class="form-select">
|
<select id="Fresserchen" class="form-select" onchange="updatePrice()">
|
||||||
<option selected>Steak</option>
|
<option value="Steak" data-price="20">Steak</option>
|
||||||
<option>Fisch</option>
|
<option value="Fisch" data-price="15">Fisch</option>
|
||||||
<option>Beeren</option>
|
<option value="Beeren" data-price="10">Beeren</option>
|
||||||
<option>Nüsse</option>
|
<option value="Nüsse" data-price="8">Nüsse</option>
|
||||||
<option>Gras</option>
|
<option value="Gras" data-price="5">Gras</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<label for="Menge" class="form-label">Menge</label>
|
<label for="Menge" class="form-label">Menge</label>
|
||||||
<select id="Menge" class="form-select">
|
<select id="Menge" class="form-select" onchange="updatePrice()">
|
||||||
<option selected>1</option>
|
<option>1</option>
|
||||||
<option>2</option>
|
<option>2</option>
|
||||||
<option>3</option>
|
<option>3</option>
|
||||||
<option>4</option>
|
<option>4</option>
|
||||||
<option>5</option>
|
<option>5</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-md-6">
|
||||||
<div class="form-check">
|
<label for="Preis" class="form-label">Preis (€)</label>
|
||||||
<input class="form-check-input" type="checkbox" id="gridCheck">
|
<input type="text" class="form-control" id="Preis" readonly>
|
||||||
<label class="form-check-label" for="gridCheck">
|
|
||||||
I agree to donate all my money
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-center mt-4">
|
<div class="col-12 text-center mt-4">
|
||||||
<button type="submit" class="btn btn-primary btn-lg shadow">Spenden</button>
|
<button type="submit" class="btn btn-primary btn-lg shadow">Spenden</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user