jQuery Preisrechner mit Preis pro Person und Gesamtpreis
Guten Morgen, ich beherrsche leid kein Java-Skript, aber ich muss aktuell einen Preisrechner für ein Projekt umsetzen.
Anhand von Beispielen habe ich es inzwischen soweit hinbekommen, dass der Preisrechner so aussieht, wie ich ihn gerne hätte.
Allerdings bekomme ich es halt nicht hin, dass der Rechner das tut, was er eben soll. Rechnen.
Ich wäre überglücklich, wenn mir jemand die Funktionen dahinter schreiben könnte.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
table{
width:95%;
margin:0 auto;
border:1px solid black;
border-collapse:collapse;
}
th,td{
border:1px solid black;
}
th{
background:lightgrey;
}
body {
font-family: sans-serif;
padding: 20px;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-moz-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
.row{
background:#eeeeee;
width:100%;
padding:10px;
}
h1{
border-bottom:2px solid #f15a24;
color:#f15a24;
}
.flex_row{
display:flex;
}
.flex_row >div:first-child{
flex:1;
}
.row >div{
background:white;
}
select{
width:100%;
margin-bottom:10px;
border: 1px solid #dcdcdc;
border-radius: 4px;
border-width: 1px;
color: #737373;
font-size: 14px;
padding: 15px;
height: auto;
line-height: normal;
}
#zusatz,#deinpreis,#endpreis,#grundk{
border-left:3px solid #f15a24;
}
#ergp,#ergpi,#ergg,#erggi{
background:#f15a24;
}
#ergp p,#ergg p{
color:white;
margin-bottom:0px;
}
#preis-pro-person,#gesamtpreis{
width:100%;
margin-bottom:10px;
border: 1px solid #fff;
border-radius: 4px;
border-width: 1px;
color: #212121;
font-size: 18px;
font-weight:700;
padding: 15px;
height: auto;
line-height: normal;
background:white
}
</style>
<h1>Preisrechner</h1>
<div align="center">
<div class="row">
<div id="grundk" class="col-12 text-left mb-2">
<h2>Grundkosten</h2>
</div>
<div class="col-12 col-lg-3 text-left pt-3">
<p> Fuhrpark / Busauswahl</p>
<select id="busxl">
<option value="0"> Bass Shuttle XL
</option>
<option value="1">Bass Shuttle XXL</option>
</select>
<small>Bass Shuttle XL (WC Nein)<br>
Bass Shuttle XXL (WC Ja)</small>
</div>
<div class="col-12 col-lg-3 text-left pt-3">
<p>Mietdauer in Stunden:</p>
<div class="range-slider">
<input class="range-slider__range" type="range" min="1" max="10" name="mietdauer" id="mietdauer" value="1">
<span class="range-slider__value" id="slidernumber1">1</span>
</div>
<small>inkl. Busfahrer, Techniker und gefahrener Kilometer</small>
</div>
<div class="col-12 col-lg-3 text-left pt-3">
<p>Anzahl der Personen:</p>
<div class="col-12 col-lg-9 text-center p-3">
<input class="range-slider__range" type="range" min="1" max="34" name="anzahl-personen" id="anzahl-personen" value="34">
<span class="range-slider__value" id="slidernumber2">34</span>
</div>
<small>Platz für max. 34 Personen inkl. Service Personal</small>
</div>
<div class="col-12 col-lg-3 text-left pt-3">
<p>Abholort / Zustieg:</p>
<select id="abholort">
<option value="0" data-price="0.00">bis 25 km (inkl.)</option>
<option value="150" data-price="150.00">bis 40 km (150,00 €)</option>
<option value="225" data-price="225.00">bis 60 km (225,00 €)</option>
<option value="300" data-price="300.00">bis 75 km (300,00 €)</option>
<option value="301" data-price="301.00">ab 75 km (auf Anfrage)</option>
</select>
<small>Pauschale für die Anfahrt zum Abholort<BR/>
Entfernung zum Abholort gemessen von "46485 Wesel"</small>
</div>
<div id="zusatz" class="col-12 text-left mb-2">
<h2>Zusätzliche Optionen</h2>
</div>
<div id="wcfeld" class="col-12 col-lg-3 text-left pt-3">
<p>WC-Nutzung:</p>
<select id="wc-nutzung">
<option value="Nein" data-price="0">Nein</option>
<option value="Ja" data-price="79">Ja (79,00 €)</option>
</select>
<small>WC Nutzung inkl. Vorbereitung und Reinigung (79,00 €)</small>
</div>
<!-- Dj Feld -->
<div id="djfeld" class="col-12 col-lg-3 text-left pt-3">
<p>DJ-Equipment:</p>
<select id="dj-nutzung">
<option value="Nein" data-price="0">Nein</option>
<option value="Ja" data-price="100">Ja (100,00 €)</option>
</select>
<small>Ermöglicht euch die Nutzung unseres professionellen DJ-Equipments</small>
</div>
<!--- cocktail feld -->
<div class="col-12 col-lg-3 text-left pt-3">
<p>Cocktails:</p>
<select id="cock">
<option value="0" data-price="0">Nein</option>
<option value="275" data-price="275">50 Cocktails - 275 €</option>
<option value="399" data-price="399">75 Cocktails - 399 €</option>
<option value="495" data-price="495">100 Cocktails - 495 €</option>
</select>
<small>5 verschiedene Cocktails inkl. Barkeeper
Mojo - Caipirinha - Swimming Pool - Long Island Ice Tea - Sex on the Bus</small>
</div>
<div class="col-12 col-lg-3 text-left pt-3">
<p>Thekennutzung:</p>
<select id="thekennutzung">
<option value="Nein" data-price="0">Nein</option>
<option value="Ja" data-price="50">Ja (50,00 €)</option>
</select>
<small>Kühlung eigener Getränke<BR/>
Nutzung des Spülbeckens<BR/>
inkl. Reinigung</small>
</div>
</div>
</div>
<!-- Wird nur angezeigt, wenn Thekennutzung "Ja" - Thekenpersonal Berechnung bei Auswahl Ja soll sein - "Mietdauer in Stunden x 15"-->
<div align="center">
<div class="row" id="thekenpersonal">
<div class="col-12 col-lg-3 text-left pt-3">
<p style="margin-bottom:0px;">Thekenpersonal:</p>
</div>
<div class="col-12 col-lg-9 text-center p-3">
<select id="thekenpersonal">
<option value="Nein" data-price="0">Nein</option>
<option value="Ja" data-price="15">Ja (15,00 € / Std.)</option>
</select>
<BR/>
<small>Ausschank der eigenen Getränke möglich oder<BR/>
Getränke an Board gegen Aufpreis erhältlich<BR/>
Bedienung pro Stunde 15,00 €</small>
</div>
</div>
</div>
<!-- Ergebnisbereich -->
<div align="center">
<div class="row">
<!-- Ihr Preis Überschrift -->
<div id="deinpreis" class="col-12 text-left mb-3">
<h2>Dein Preis</h2>
</div>
<!-- Preis pro Person - Berechnung soll sein "Gesamtpreis / Anzahl der Personen"-->
<div id="ergp" class="col-12 col-lg-3 text-left pt-3">
<p>Preis pro Person:</p>
</div>
<div id="ergpi" class="col-12 col-lg-9 text-center p-3">
<input id="preis-pro-person" name="preis-pro-person">
<BR/>
<small>Preis inkl. MwSt.</small>
</div>
<!-- Abstand -->
<div class="col-12 m-2"></div>
<!-- Gesamtpreis - Berechnung soll sein
mietdauer + abholort + wc-nutzung + thekennutzung + thekenpersonal -->
<div class="col-12 col-lg-3 text-left pt-3" id="ergg">
<p>Gesamtpreis:</p>
</div>
<div id="erggi" class="col-12 col-lg-9 text-center p-3">
<input id="gesamtpreis" name="gesamtpreis">
<BR/>
<small>Preis inkl. MwSt.</small>
</div>
<div id="rbox" class="col-12 col-lg-3 text-left pt-3">
<h2>Rechen Weg</h2>
</div>
<div class="col-12 col-lg-3 text-left pt-3">
<table>
<tr>
<th>Leisung</th>
<th> Gewählt</th>
<th>Preis</th>
<th>Gesammtpreis</th>
</tr>
<tbody id="rweg">
</tbody>
</table>
</div>
</div>
</div>
<!-- erstellt by basti1012 https://basti102.de , dieser Text daf entfernt werden-->
<script>
var preise = [
['1', '395'],
['2', '645'],
['3', '895'],
['4', '999'],
['5', '1249'],
['6', '1489'],
['7', '1729'],
['8', '1969'],
['9', '2209'],
['10', '2222']
];
function berechnen() {
var wc = $('#wc-nutzung');
var wc_feld = $('#wcfeld');
var busxxl = $('#busxl');
var md = $('#mietdauer');
var sl1 = $('#slidernumber1');
var sl2 = $('#slidernumber2');
var anp = $('#anzahl-personen');
var abo = $('#abholort');
var thp = $('#thekenpersonal');
var thn = $('#thekennutzung');
var dj = $('#dj-nutzung');
var co = $('#cock');
dj = dj.find(':selected').data('price');
if (busxxl.val() == 1) {
wc_feld.css('display', 'block');
wc = wc.find(':selected').data('price');
} else {
wc_feld.css('display', 'none');
wc = 0;
}
var mietedau = md.val();
sl1.html(mietedau)
var miete_dau = preise[mietedau - 1][1];
var anz_pers = anp.val()
sl2.html(anz_pers)
var abholu = abo.val();
var co = co.val();
var theke_n = thn.find(':selected').data('price')
if (theke_n != 0) {
thp.css('display', 'block');
var theke_p = thp.find(':selected').data('price')
} else {
thp.css('display', 'none');
theke_p = 0;
}
let gleich2 = parseInt(miete_dau) + parseInt(abholu);
let gleich7 = parseInt(wc) + parseInt(gleich2);
let gleich9 = parseInt(theke_n) + parseInt(gleich7);
let gleich10 = parseInt(theke_p) * parseInt(mietedau);
let gleich11 = parseInt(gleich10) + parseInt(gleich9);
let gleich12 = parseInt(dj) + parseInt(gleich11);
let gleich13 = parseInt(co) + parseInt(gleich12);
$('#preis-pro-person').val((gleich13 / anz_pers).toFixed(2) + ' €');
$('#gesamtpreis').val(gleich13 + ' €');
var r_wege_e = `<tr>
<td>Anzahl Stunden</td>
<td>${mietedau} </td>
<td>${miete_dau} €</td>
<td>${miete_dau} €</td>
</tr>
<tr>
<td>Anzahl Personen</td>
<td>${anz_pers}</td>
<td></td>
<td>${miete_dau} €</td>
</tr>`;
if (abholu != 0) {
r_wege_e += `<tr>
<td>Abholung</td>
<td>${abo.find(':selected').html()}</td>
<td>${abholu} €</td>
<td>${gleich2} €</td>
</tr>`;
}
if (wc != 0) {
r_wege_e += `<tr>
<td>WC nutzung</td>
<td>Ja</td>
<td>${wc} €</td>
<td>${gleich7} €</td>
</tr>`;
}
if (theke_n != 0) {
r_wege_e += `<tr><td>Theken-nutzung</td>
<td>Ja</td>
<td>${theke_n} €</td>
<td>${gleich9} €</td>
</tr>`;
}
if (theke_p != 0) {
if (mietedau != 1) {
var theke_p_helper = `X ${mietedau}`;
} else {
var theke_p_helper = '';
}
r_wege_e += `<tr><td>Theken Bedienung</td>
<td>Ja ${theke_p} ${theke_p_helper}</td>
<td>${gleich10} €</td>
<td>${gleich11} €</td>
</tr>`;
}
if (dj != 0) {
r_wege_e += `<tr>
<td>Dj Mieten</td>
<td>Ja</td>
<td>${dj} €</td>
<td>${gleich12} €</td>
</tr>`;
}
if (co != 0) {
r_wege_e += `<tr>
<td>Cocktail</td>
<td>Ja</td>
<td>${co} €</td>
<td>${gleich13} €</td>
</tr>`;
}
$('#rbox').css('display', 'block');
$('#rweg').html(r_wege_e);
}
$('#wc-nutzung,#thekennutzung,#thekenpersonal,#abholort,#anzahl-personen,#mietdauer,#busxl,#dj-nutzung,#cock').change(function() {
berechnen();
});
berechnen();
</script>