WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 08.08.2017 13:31:47

mave
Member

Beispiel für bedingt angezeigte Blöcke

Hallo mrbaseman,

gibt es ein mpForm-Beispiel für den Gebrauch eines "bedingt angezeigten Blocks"?

Evt. habe ich da was übersehen, ansonsten aber bin ich ratlos ;-)

Danke!

Offline

#2 08.08.2017 14:47:33

mrbaseman
Developer

Re: Beispiel für bedingt angezeigte Blöcke

Hallo mave,

du legst ein Feld an, zum Beispiel eine Dropdown Liste, die verschiedene Werte annehmen kann (z.B. Äpfel, Käse, Milch). Es können auch Radiobuttons oder theoretisch auch Checkboxen sein.
Der Besucher der Seite soll hier auswählen, was er haben möchte. Im nächsten Schritt soll er angeben können wie viel davon.

  • Äpfel werden in 500g Beuteln angeboten, davon soll er die Anzahl eingeben können.

  • Wählt er Käse aus, soll er angeben können wie viel Gramm er kaufen möchte,

  • und wenn er Milch ausgewählt hat, soll er angeben wie viel Liter Milch er möchte.

D.h. die Mengenangabe hängt davon ab, welches Produkt er ausgewählt hat.

Das kann man machen, indem man div-Bereiche invisible stellt und per Javascript aktiviert, sobald im Dropdownfeld eine Auswahl getroffen wird.

Der Javascript code wird aber etwas sperrig und genau da setzt der Assistent der "bedingt angezeigten Blöcke" an.
Du legst ein Textfeld für die "Menge" an und möchtest dazu eine Beschreibung (Beutel, Gramm, Liter) anzeigen, die sich verändert, je nach dem was zuvor ausgewählt wurde.
Dazu machst du einen bedingt angezeigten Block, wählst dort das Dropdownfeld aus und der Assistent erzeugt dir ein HTML-Feld, in dem der automatisch generierte Code landet.

  • Wenn es nur darum geht, einen Text anzuzeigen, der davon abhängt, was man ausgewählt hat, kann man den einfach mit dort reintippen.

  • Wenn man jetzt noch weitere Formularfelder mit ein- und ausblenden möchte, dann muss man weitere HTML Felder anlegen und den Code auf diese verteilen, damit man dazwischen (also innerhalb der div-Sections) noch Formularfelder unterbringen kann.

Aber Vorsicht: Das dürfen dann keine Pflichtfelder sein, sonst wirds für den Benutzer blöd, wenn das Pflichtfeld ausgeblendet ist.

Eine weitere Anwendung wären z.B. Anzeige von Länderspezifischen AGBs, Anzeige von Versandkosten je nach gewähltem Land oder komplexere Fragebögen, bei denen je nach Antwort die nächste Frage etwas anders aussieht. (Haben Sie unser Produkt bereits im Einsatz? Bei "Ja" wäre die nächste Frage "Sind Sie damit zufrieden?", bei "Nein" wäre die nächste Frage vielleicht "Haben Sie Interesse es einmal kostenlos auszuprobieren?").

Sobald es aber dann mehrere Ebenen von bedingt angezeigten Blöcken werden würden, sind mehrseitige Fragebögen die einfachere Lösung. Wenn es nicht zu komplex ist, sind die bedingt angezeigten Blöcke eine interessante Alternative.

viele Grüße,
Martin

(Post etwas formatiert - florian)

Last edited by florian (09.08.2017 08:47:55)

Offline

Liked by:

florian

#3 09.08.2017 22:47:57

mave
Member

Re: Beispiel für bedingt angezeigte Blöcke

Hallo Martin,

ausdrücklichen Dank für die ausführliche Erläuterung!

Also schau ich mir das noch mal in Ruhe an ... Nochmals danke!

...

Wenn man jetzt noch weitere Formularfelder mit ein- und ausblenden möchte, dann muss man weitere HTML Felder anlegen und den Code auf diese verteilen, damit man dazwischen (also innerhalb der div-Sections) noch Formularfelder unterbringen kann.

Au weh, das peile ich nun überhaupt nicht ...

Last edited by mave (09.08.2017 23:08:28)

Offline

#4 10.08.2017 08:26:52

mrbaseman
Developer

Re: Beispiel für bedingt angezeigte Blöcke

Hallo mave,

Probier doch erst mal einen ganz einfachen Fall:

  • Lege Radio-Buttons an mit ein paar Werten - ganz egal was, hauptsache man kann was auswählen (z.B. 3 Werte: "ja", "nein" "vielleicht").

  • Dann lege als nächstes einen bedingt angezeigten Block an. Nach dem ersten Abspeichern (wenn das Feld einen Namen und einen Typ hat, müsste eine Auswahlliste auftauchen, in der du das zuvor angelegte Feld mit den Radiobuttons auswählen kannst.
    Dann speicher das nochmal ab. Bei diesem Speichern verwandelt sich der bedingt angezeigte Block in ein Feld vom Typ "HTML-Code" und den kannst du dir anschauen. Da ist ein Kommentar oben drin, da sind die div-Sections passend zu den möglichen Werten schon angelegt, da ist Javascript dabei, das die divs einzeln ein- und ausblendet.

  • Wenn du damit ein wenig gespielt hast, lösche diese Felder wieder und erzeuge etwas, was deinem Anwendungsfall näher kommt, denn da der bedingt angezeigte Block in ein HTML-Feld konvertiert wird, gibt es kein Zurück mehr sobald der HTML-Code einmal generiert ist (das ist aber ja auch nicht schlimm, denn der "Assistent" ist ja schnell durchgeklickt und in den meisten Fällen wird man den HTML-Code ja sowieso neu erzeugen wollen, wenn sich an den Feldern was ändert, von denen der Code abhängt)

Danke an Florian fürs schönere Formatieren meines Posts

Offline

#5 25.08.2017 16:22:20

mave
Member

Re: Beispiel für bedingt angezeigte Blöcke

Vielen Dank!

Offline

#6 20.05.2020 09:56:11

her-ha
Member

Re: Beispiel für bedingt angezeigte Blöcke

Hallo,
ich habe mir die Vorschläge soweit durchgelesen und eine Reihe mit Radio-Buttons gemacht und dann den "bedingt angezeigten Block" angelegt.

Womit ich jedoch nicht klar komme ist, wie ich ein Leerfeld anlegen soll (siehe Bild im Anhang als Erklärung) ?

der Html-Code ist dabei folgender:

<tr class="fid85 mpform_html"><td class="mpform_title">:</td><td class="mpform_help"></td><td class="mpform_field">
<!--/* Generierter Code - Sie wollen wahrscheinlich den Inhalt der 
     div Abschnitte ändern und Sie könnten das 
     schließende div-Tag und alles was folgt zu einem anderen
     HTML-Abschnitt verschieben. Wenn Sie die Optionen von Bitte ensprechende ID auswählen
     ändern möchten, müssen Sie den Code manuell
     anpassen (oder Sie starten von vorne indem Sie den Feldtyp
     zurück auf bedingt angezeigter Block setzen) */-->
<div id="div_wb_Abgebots-ID85" style="display:none;">Sie haben ausgewählt: Abgebots-ID</div>
<div id="div_wb_Vertrags-ID85" style="display:none;">Sie haben ausgewählt: Vertrags-ID</div>
<div id="div_wb_Empfehlungs-ID85" style="display:none;">Sie haben ausgewählt: Empfehlungs-ID</div>
<div id="div_wb_Kunden-ID85" style="display:none;">Sie haben ausgewählt: Kunden-ID</div>
<script type="text/javascript">
function EventHandler_fid85(){
document.getElementById("wb_Abgebots-ID85").checked 
  ? document.getElementById("div_wb_Abgebots-ID85").style.display = "block"
  : document.getElementById("div_wb_Abgebots-ID85").style.display = "none";
document.getElementById("wb_Vertrags-ID85").checked 
  ? document.getElementById("div_wb_Vertrags-ID85").style.display = "block"
  : document.getElementById("div_wb_Vertrags-ID85").style.display = "none";
document.getElementById("wb_Empfehlungs-ID85").checked 
  ? document.getElementById("div_wb_Empfehlungs-ID85").style.display = "block"
  : document.getElementById("div_wb_Empfehlungs-ID85").style.display = "none";
document.getElementById("wb_Kunden-ID85").checked 
  ? document.getElementById("div_wb_Kunden-ID85").style.display = "block"
  : document.getElementById("div_wb_Kunden-ID85").style.display = "none";
}
document.getElementById("wb_Abgebots-ID85").addEventListener("change",EventHandler_fid85);
document.getElementById("wb_Vertrags-ID85").addEventListener("change",EventHandler_fid85);
document.getElementById("wb_Empfehlungs-ID85").addEventListener("change",EventHandler_fid85);
document.getElementById("wb_Kunden-ID85").addEventListener("change",EventHandler_fid85);
EventHandler_fid85();
</script>
</td></tr>

Gruß Herbert

Offline

#7 31.05.2020 22:23:59

mrbaseman
Developer

Re: Beispiel für bedingt angezeigte Blöcke

Naja, wenn du ein universelles Feld "ID" dafür verwendest, dann brauchst du keinen bedingt angezeigten Block. Dann hast du einen Radio-Button und ein Textfeld, in das eben diese "ID" dann eingetragen wird.

Wenn du aber unterschiedliche Felder haben möchtest, dann lege einfach die 4 Felder an Angebots-ID, Vertrags-ID, Empfehlungs-ID, Kunden-ID, und dazwischen jeweils ein HTML-Feld. Den generierten HTML-Code musst du dann auf die HTML-Felder aufteilen. An der Stelle, an der der Text "Sie haben ausgewählt: ..." steht, musst du den generierten Code auftrennen und die nachfolgenden Teile jeweils in das nächste HTML Feld verschieben, so dass nicht der generierte Text sondern das jeweilige Textfeld ein- bzw. ausgeblendet wird. Kleiner Nachteil: Die Textfelder können keine Pflichtfelder sein, denn sonst müsste man sie ja alle ausfüllen, aber der Besucher bekommt immer nur eines der 4 Felder angezeigt, je nach dem, welchen Radio-Button er gerade angeklickt hat.

Offline

Board footer

up