JavaScript Preisrechner - Auswahllistenwert übergeben

digiTALE · 14. November 2011

Hallo,

ich habe einen Preisrechner per Javascript geschrieben. Dieser soll aus 3 Dropdownlisten den Preis ermitteln (Anzahl der Personen bis max 4, Anzahl der Übernachtungen und ob ein Haustier mitgebracht wird).

Nun mein Problem, leider hab ich es noch nicht geschafft das dass Script die Werte aus der Dropdownliste ermittelt, welche der Besucher ausgewählt hat. Mit Textfeldern funktioniert es wunderbar, aber ich möchte die Eingabe der Daten beschränken und somit soll das ganze über Dropdownlisten laufen. Der Preis wird sofort aktualisiert.

Wie lese ich den Wert der Dropdownliste aus, damit der Preis beim auswählen gleich aktualisiert wird?

HTML:

<html>
<head>
<title>Test</title>
<style type="text/css">
</style>
    <script type="text/javascript">
    <!--
     
    function preis() {
     
    var a = 36; // 2 Personen pro Nacht
    var b = 6; // fuer jede weitere Person
    var c = 23; // Reinigung
    var d = 25; // Reinigung Haustier
    var e = 1; // Kurtaxe
    var f = 0.25; // Gemeindeabgaben
     
    xx = document.form.person.options[person].value;
    yy = document.form.nacht.options[nacht].value;
    zz = document.form.tiere.options[tiere].value;
     
    if (xx == 1) { pp = a.toFixed(2); }
     
    else if (xx == 2) { pp = a; }
     
    else if (xx == 3) { pp = a + b; }
     
    else if (xx == 4) { pp = a + (b*2); }
     
    else { var xx = 2; var yy = 1; pp = a; }
     
    if (zz == 1) { tt = d; }
     
    else { var zz = 0; tt = 0; }
     
     
    // Kurtaxe
    var kk = (xx*e)*yy;
     
    // Gemeindeabgaben
    var gg = (xx*f)*yy;
     
    document.form.gesamt.value = parseFloat((pp*yy)+kk+gg+c).toFixed(2);
     
    }
     
    -->
    </script>
</head>
<body>
    <form name="form" onkeyup="preis();">
    <div class="position">Personen: <div class="option right">
    <select name="person">
    <option selected="selected" value="2">2</option>
    <option value="3">3</option>
    </select></div></div>
    <div class="clear"></div>
    <div class="position">&Uuml;bernachtungen: <div class="option right">
    <select name="nacht">
    <option selected="selected" value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select></div></div>
    <div class="clear"></div>
    <div class="position">Haustiere: <div class="option right"><select name="tiere"><option selected="selected" value="0">Nein</option><option value="1">Ja</option></select></div></div>
    <div class="clear"></div>
    <div class="position">&nbsp;</div>
    <div class="position"><div class="gesamt right"><input type="text" name="gesamt" value="61.50" class="input_gesamt" readonly="readonly" />*</div><strong>Gesamt in Euro:</strong><br /><small>*Preis kann abweichen</small></div>
    <div class="clear"></div>
    <p><small>Im Preis enthalten ist: <em>Strom, Wasser, Heizung, Handt&uuml;cher und Bettw&auml;sche</em></small></p>
     
    </form>
</body>

DaMoN1993 · 14. November 2011

über
this.form.nacht.options[this.form.nacht.SelectedIndex].Value
müsste man auf den Wert des aktuellen Elements zugreifen können.
Meine HTML/Javascript Kenntnisse sind etwas eingestaubt, aber so sollte es laut selfhtml gehen:
http://de.selfhtml.org/html/formulare/auswahl.htm#listen
(Und ich denke im select-tag ein onchange="preis()", sofern das teil der Fragestellung war)

MfG
Damon

digiTALE · 14. November 2011

[Gelöst]: Preisrechner - Auswahllistenwert übergeben

Danke für den Hinweis. Hab es jetzt hinbekommen und der Preis wird bei den jeweiligen Angaben aktualisiert.

Hier nun das funktionierende Script:

HTML:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function preis() {

	var wert_a = 36; // 2 Personen pro Nacht
	var wert_b = 6; // fuer jede weitere Person
	var wert_c = 23; // Reinigung
	var wert_d = 25; // Reinigung Haustier
	var wert_e = 1; // Kurtaxe
	var wert_f = 0.25; // Gemeindeabgaben

	wert_person = document.form.person.options[document.form.person.selectedIndex].value;
	wert_nacht = document.form.nacht.options[document.form.nacht.selectedIndex].value;
	wert_tiere = document.form.tiere.options[document.form.tiere.selectedIndex].value;

	if (wert_person == 1) { ausgabe_person = wert_a; }
     
		else if (wert_person == 2) { ausgabe_person = wert_a; }
     
		else if (wert_person == 3) { ausgabe_person = wert_a + wert_b; }
     
		else if (wert_person == 4) { ausgabe_person = wert_a + (wert_b*2); }
     
		else { var wert_person = 2; var wert_nacht = 1; ausgabe_person = wert_a; }

	if (wert_tiere == 1) { ausgabe_tiere = wert_d; }
     
		else { ausgabe_tiere = 0; }

	var ausgabe_kurtaxe = (wert_person*wert_e)*wert_nacht;

	var ausgabe_gemeinde = (wert_person*wert_f)*wert_nacht;
     
	document.form.gesamt.value = parseFloat((ausgabe_person*wert_nacht)+ausgabe_kurtaxe+ausgabe_gemeinde+ausgabe_tiere+wert_c).toFixed(2);
     
}
     
-->
</script>
</head>
<body>
    <form name="form" onkeyup="preis();">
    <div class="position">Personen: <div class="option right">
    <select name="person" onchange="preis()">
    <option selected="selected" value="2">2</option>
    <option value="3">3</option>
    </select></div></div>
    <div class="clear"></div>
    <div class="position">&Uuml;bernachtungen: <div class="option right">
    <select name="nacht" onchange="preis()">
    <option selected="selected" value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select></div></div>
    <div class="clear"></div>
    <div class="position">Haustiere: <div class="option right"><select name="tiere" onchange="preis()"><option selected="selected" value="0">Nein</option><option value="1">Ja</option></select></div></div>
    <div class="clear"></div>
    <div class="position">&nbsp;</div>
    <div class="position"><div class="gesamt right"><input type="text" name="gesamt" value="61.50" class="input_gesamt" readonly="readonly" />*</div><strong>Gesamt in Euro:</strong><br /><small>*Preis kann abweichen</small></div>
    <div class="clear"></div>
    <p><small>Im Preis enthalten ist: <em>Strom, Wasser, Heizung, Handt&uuml;cher und Bettw&auml;sche</em></small></p>
     
    </form>


</body>
</html>

Suche

JavaScript Preisrechner - Auswahllistenwert übergeben

digiTALE

Lt. Junior Grade

DaMoN1993

Commander

digiTALE

Lt. Junior Grade

Ähnliche Themen