Ajax Inhalte laden mit Button

[darkshepard]

Hallo, ich dies ist mein erster Beitrag. Ich habe folgendes Problem: Auf einer Website ist ein Formular zur Preisberechnung mit Radiobuttons - diese Berechnung erfolgt in Euro. Nun soll dies auch in SFR möglich sein, also muss ich die Preise in den SFR anpassen - soweit kein Problem. Doch: Der User soll mit zwei Buttons zwischen den Währungen wechseln können. Einmal "Euro" und dann "SFR". Je nach dem, welcher Button geklickt wird, soll entweder das Formular für den Euro oder SFR geladen werden.

 <button type="button" onclick="Euro();">
   
  <p>Euro</p>
   
  </button>
  <button type="button" onclick="SFR();">
   
  <p>SFR</p>
   
  </button>
<div id="euro">
<input type=radio>Wurst 3,00€<br>
<input type=radio>Käse 4,00€<br>
<input type=radio>Brot 2,50€<br>
</div>
<div id="sfr">
<input type=radio>Wurst 4,00 SFR<br>
<input type=radio>Käse 5,00 SFR<br>
<input type=radio>Brot 5,50 SFR<br>
</div>

Soweit in der Theorie - kann mir jemand etwas Starthilfe geben? Wie muss ich dies in Ajax umsetzen?
PS: Google habe ich schon befragt, nur steige ich nicht ganz durch die Tuts durch, da ich dies in Wordpress einbinden möchte.

 

[ComFreek]

Hallo und herzlich Willkommen im Forum!

Erst einmal: Weißt du, was AJAX ist? AJAX wird verwendet, um mit JavaScript Daten von einem Server zu laden. In deinem Fall brauchst du überhaupt keine AJAX, da du einfach nur ein DIV aus- bzw. einblenden möchtest.

Hier ein einfaches Beispiel, der mit deinem bestehenden Code funktionieren würde:

// Randbemerkung: Noch schöner wäre es, zwei Funktionen show() und hide()
// zu erstellen, um den Code sauberer ("DRY-Prinzip") zu halten.
var sfrDiv = document.getElementById("sfr");
var euroDiv = document.getElementById("euro");
function Euro() {
  sfrDiv.style.display = 'none';
  euroDiv.style.display = '';
}
function SFR() {
  sfrDiv.style.display = '';
  euroDiv.style.display = 'none';
}
// Am Anfang Euro() aufrufen, um
// den Euro-Block von Anfang zu zeigen
// und den SFR-Block zu verstecken
Euro();

 

[darkshepard]

Hi, danke für die Antwort - ich habe hinter den Radiobuttons noch eine recht komplexe Rechnung mit JS laufen. Mit deiner Methode funktioniert dieses Skript nur für eines der beiden Divs. Gibt es eine möglichkeit das noch anders zu machen, ausser über die Div Geschichte?

 

[ComFreek]

Wieso funktioniert mein Code nur für einen der beiden DIV-Container? Prüfe mal auf Fehler in der JavaScript-Konsole.

Du willst ein DIV ausblenden und das andere einblenden. Da gibt es keine andere Möglichkeit, als den DIVs CSS-Eigenschaften in irgendeiner Weise zuzuweisen und sie somit ein- bzw. auszublenden.

 

[darkshepard]

Also das mit den Div-Containern hin und her switchen funktioniert bestens. Nur ist hinter jedem Button noch ein Skript zur Preisberechnung - und das funktioniert nur bei einem von beiden dann. Ich hoffe du verstehst das Problem, hatte mich oben etwas unklar ausgedrückt.