nicht angemeldet
Preis wechseln
Der Martin
Matthias ApselGuten Abend,
ist es möglich mein Preis wechseln zu lassen, wenn der User mit DropDown etwas ändert, das sieht derzeit wie folgt aus:
<span class="price_pro">
<select>
<option value="1" selected="selected">pro Nacht</option>
<option value="2">pro Woche</option>
<option value="3">pro Monat</option>
</select></span>
mein HTML Bereich sieht so aus:
<span class="price">59,00 € </span>
ich weiß man könnte jetzt mit Ajax das ganze machen, hmm aber ich hoffe da gibts noch nee bessere Variante. Der jeweilige Preis steht in folgende Variablen:
$_preise['tag']
$_preise['woche']
$_preise['monat']
Gruß
Jochen
-
Hallo,
ist es möglich mein Preis wechseln zu lassen, wenn der User mit DropDown etwas ändert, ...
ja, mit Javascript.
<span class="price_pro">
<select>
<option value="1" selected="selected">pro Nacht</option>
<option value="2">pro Woche</option>
<option value="3">pro Monat</option>
</select></span>Wozu das span-Element? Wenn es nur ein einziges Kindelement enthält, nämlich das select, dann ist es überflüssig. > Der jeweilige Preis steht in folgende Variablen: > > $\_preise['tag'] > $\_preise['woche'] > $\_preise['monat'] Das sieht nach PHP aus. PHP kann aber weder auf Nutzer-Interaktionen reagieren, noch die aktuelle Anzeige im Browser verändern, weil das PHP-Script auf dem Server längst fertig und futsch ist, wenn das Dokument im Browser angezeigt wird. Gib also die nötigen Werte, aus denen der Preis ermittelt werden kann, als Javascript mit und reagiere damit auf die Interaktion. Ciao, Martin -- Der Dienstweg ist die Abkürzung vom Holzweg zur Sackgasse. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
ja, mit Javascript.
gibts dazu ein Beispiel oder ein Rat, nach was ich bei Google suchen kann? Kenne mich mit Javascript leider kaum aus.
Wozu das span-Element? Wenn es nur ein einziges Kindelement enthält, nämlich das select, dann ist es überflüssig.
Das brauch ich um das DropDown nach rechts neben den Preis zu schieben, wenn ich das nicht mache, dann wird mir das DropDown unter dem Preis angezeigt und das möchte ich nicht.
Das sieht nach PHP aus.
Ich wollte nur zeigen, wie ich die Preise aus der Datenbank lade, dass ich damit nichts machen kann bzw. hier schon zu spät ist, ist mir klar.
Gib also die nötigen Werte, aus denen der Preis ermittelt werden kann, als Javascript mit und reagiere damit auf die Interaktion.
Auch hier nochmals die Frage wie oben, nach was kann ich bei Google suchen, bzw. gibts hier auf der Seite ein Beispiel? Selber kenne ich mich mit Javascript kaum aus.
Gruß
Jochen-
Om nah hoo pez nyeetz, Jochen!
Auch hier nochmals die Frage wie oben, nach was kann ich bei Google suchen, bzw. gibts hier auf der Seite ein Beispiel? Selber kenne ich mich mit Javascript kaum aus.
Ja, in der http://de.selfhtml.org/javascript/index.htm@title=JavaScript-Dokumentation solltest du fündig werden.
Ein qnd-Beispiel:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Preis</title> <style type="text/css"> </style> <script> [code lang=javascript]function zeigePreis() { var preis = 59.90; switch (document.getElementById('preiswahl').selectedIndex) { case 0 : preis = 59.90; break; case 1 : preis = 170.96; break; case 2 : preis = 399.78; break; default: 59.90; } document.getElementById('preis').innerHTML = preis + " €"; }</script>
</head>
<body onload="zeigePreis()">
<p>
<span id="preis"></span>
<select id="preiswahl" onchange="zeigePreis()">
<option value="1" selected="selected">pro Nacht</option>
<option value="2">pro Woche</option>
<option value="3">pro Monat</option>
</select>
</p>
<noscript>Diese Seite verwendet JavaScript zur Berechnung.</noscript>
</body>
</html>[/code]Matthias
-
Moin.
Das wirft aber Probleme auf:
<script>
function zeigePreis() {
var preis = 59.90; switch (document.getElementById('preiswahl').selectedIndex) { case 0 : preis = 59.90; break; case 1 : preis = 170.96; break; case 2 : preis = 399.78; break; default: 59.90; } document.getElementById('preis').innerHTML = preis + " €";}
> </script> > </head> > <body onload="zeigePreis()"> > <p> > <span id="preis"></span> > <select id="preiswahl" onchange="zeigePreis()"> > <option value="1" selected="selected">pro Nacht</option> > <option value="2">pro Woche</option> > <option value="3">pro Monat</option> > </select> > </p> > <noscript>Diese Seite verwendet JavaScript zur Berechnung.</noscript> > </body> > </html>[/code] ... dürfte zu einer Ausgabe wie "59.9 €" führen. geringfügig nachgebessert: ~~~javascript // var preis = '59.90'; siehe default switch (document.getElementById('preiswahl').selectedIndex) { case 0 : preis = '59.90'; break; case 1 : preis = '170.96'; break; case 2 : preis = '399.78'; break; default: '59.90'; }wenn wir dann schon dabei sind: Die Daten stammen ja offensichtlich aus PHP. Dann würde ich das auch weitgehend benutzen wollen...
Hier mein Funktionsbeispiel, dass, weil es nur ein Beispiel ist, noch eine ganze Menge Verbesserungspotential hat.
Ich würde z.B. noch mehr parametrisieren wollen (pro Nacht ... pro Woche ... pro Monat ... ? als Array + hash) und dann daraus die Options erzeugen. Und ich würde auch ein richtiges Template verwenden wollen.
Was ich auf keinen Fall machen würde, wäre dem zurückgesendeten Preis zu vertrauen.$_REQUEST durch den korrekten Hash der Wahl ($_POST/$_GET) ersetzen. Es gibt - außerhalb des (meines) Testes keinen Grund diese Einschränkung nicht zu treffen.
Das Beispiel funktioniert aber erst mal fehlerfrei.
<?php # Defaults $curr = '€'; $decPoint=','; # Daten: $Preis[0]=59.9; $Preis[1]=170.96; $Preis[2]=399.78; if ( isset($_REQUEST['selection']) ) { $selection=intval($_REQUEST['selection']); } elseif ( isset($_REQUEST['preiswahl']) ) { $selection= intval($_REQUEST['preiswahl']); } else { $selection=0; } ?><!doctype html> <html> <head> <meta charset="UTF-8"> <title>Bestellen</title> <style type="text/css"> </style> <script type="text/javascript"> function zeigePreis() { var dPreis = <?php print $Preis[0]; ?>; var sPreis = "<?php print str_replace('.', $decPoint, sprintf("%1.2f $curr", $Preis[0])); ?>"; var s=document.getElementById('preiswahl').selectedIndex; if (1==s) { var dPreis = <?php print $Preis[1]; ?>; var sPreis = "<?php print str_replace('.', $decPoint, sprintf("%1.2f $curr", $Preis[1])); ?>"; } if (2==s) { var dPreis = <?php print $Preis[2]; ?>; var sPreis = "<?php print str_replace('.', $decPoint, sprintf("%1.2f $curr", $Preis[2])); ?>"; } document.getElementById('sPreis').innerHTML = sPreis; document.getElementById('selection').value = s; document.getElementById('dPreis').value = dPreis; document.getElementById('bestellen').value = "Zum Preis von " + sPreis + " bestellen."; } </script> </head> <body onload="document.getElementById('noscript_submit').type='hidden';"> <form name="auswahl" action="<?php print $_SERVER['PHP_SELF']; ?>" method="GET"> <select name="preiswahl" id="preiswahl" onchange="zeigePreis()"> <option value="0" <?php if (0==$selection) {print 'selected="selected"';} ?> >pro Nacht</option> <option value="1" <?php if (1==$selection) {print 'selected="selected"';} ?> >pro Woche</option> <option value="2" <?php if (2==$selection) {print 'selected="selected"';} ?> >pro Monat</option> </select> <input id="noscript_submit" type="submit" value="wählen" /> </form> <noscript>Diese Seite verwendet JavaScript zur Berechnung der Anzeige. Das Beispiel geht aber auch ohne Javascript.</noscript> <p>Der Spaß kostet <span id="sPreis"><?php print str_replace('.', $decPoint, sprintf("%1.2f $curr", $Preis[$selection])); ?></span>.</p> <form name="bestellen" method="GET" action="<?php print $_SERVER['PHP_SELF']; ?>"> <input type="text" name="selection" id="selection" value="<?php print $selection; ?>" /> <input type="text" name="dPreis" id="dPreis" value="<?php print $Preis[$selection]; ?>"><input id="bestellen" type="submit" value="Zum Preis von <?php print str_replace('.', $decPoint, sprintf("%1.2f $curr", $Preis[$selection])); ?> bestellen" /> </form> </body> </html>Vorteil: dPreis (in Javascript) steht dann für weitere Berechnungen zur Verfügung, kann z.B. auch im ein zusätzliches verstecktes Formularfeld eingetragen werden, was nützlich für die weitere serverseitige Verarbeitung ist.
Hinweis: Natürlich wäre es eine gute Idee, sich etwas wie ein Template zu bauen oder ein template-System zu benutzen.
Das Skript zeigt aber sehr schön das "klassische Zusammenspiel" von Javascript, HTML und PHP. Freilich gänge mit "Ajax" oder XMLHttpRequests auch so einiges. Das hebe ich aber für das nächste Mal auf.
-
-
-
-
Hallo,
mein HTML Bereich sieht so aus:
<span class="price">59,00 € </span>
Was spricht dagegen, den options den Preis zuzuordnen statt 1, 2, 3 ? Dann könnte dein HTML Bereich so aussehen: ~~~html <p>Preis: <span id="price"></span> €</p> <select> <option value="59,00" onclick="document.getElementById('price').innerHTML=this.value" selected="selected">pro Nacht</option> <option value="600,00" onclick="document.getElementById('price').innerHTML=this.value">pro Woche</option> <option value="2000,00" onclick="document.getElementById('price').innerHTML=this.value">pro Monat</option> </select>Gast
-
Hallo Gast,
<p>Preis: <span id="price"></span> €</p>
<select>
<option value="59,00" onclick="document.getElementById('price').innerHTML=this.value" selected="selected">pro Nacht</option>
<option value="600,00" onclick="document.getElementById('price').innerHTML=this.value">pro Woche</option>
<option value="2000,00" onclick="document.getElementById('price').innerHTML=this.value">pro Monat</option>
</select>vielen vielen DANK für deine Hilfe, genau so habe ich mir das vorgestellt, aber leider geht deine Version in meinem Chrome nicht. Im Firefox ist alles wunderbar der Chrome macht nichts. Muss ich hier noch was beachten? Gruß Jochen-
હેલો
vielen vielen DANK für deine Hilfe, genau so habe ich mir das vorgestellt, aber leider geht deine Version in meinem Chrome nicht. Im Firefox ist alles wunderbar der Chrome macht nichts. Muss ich hier noch was beachten?
Du möchtest bei „http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange“ etwas anzeigen.
બાય
--
.
..:
-
-
