WBCE CMS Forum

kisral

Mitglied

MiniForm - Felder aktiv nach Eingabe in Chreckbox

Hallo zusammen,
ich möchte Texteingabefelder erst sichtbar bzw. aktiviert haben, wenn zuvor eine Checkbox oder ein Radiobutton aktiviert wurde. Allerdings weiß ich nicht, wie ich das im Miniform erstellen kann.

Hat jemand eine Idee dazu? Die Suche im Forum ergab leider kein Ergebnis.

florian

Administrator

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Mit dem Formulargenerator geht das nicht, Du musst dann den Code des Formular-Templates bearbeiten. Das ist jetzt keine Raketenwissenschaft, aber schon etwas JavaScript-Fummelkram. Hierhabe ich sowas ähnliches umgesetzt (abhängig von "Ich möchte folgendes ausleihen" Auswahl) , ist zwar mpform, das Prinzip ist aber das selbe. Wichtig ist, dass die wahlweise unsichtbaren oder deaktivierten Felder keine Pflichtfelder sind, weil sich das Formular ja sonst nicht absenden lässt...

Das ist ist die ganze Magie:

<script type="text/javascript">
<!--
$('#wb_Outdoor-Spiele3er70').click(function() {
    $("#ods").toggle(this.checked);
    $("#spima").hide();
});
$('#wb_Outdoor-Spiele5er70').click(function() {
    $("#ods").toggle(this.checked);
    $("#spima").hide();
});
...
// -->
</script>

Das heißt, die Formularfelder brauchen eine ID und die Divs drumherum auch, die dann mit toggle/hide ein-/ausgeblendet werden.

kisral

Mitglied

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Danke Florian,
das macht es für mich klarer ... wo im Quelltext des Formulars bringe ich das Javascript unter?

Könntest du mir ein Beispiel schreiben mit dem Javascript mit zwei Radiobuttons, wovon einer dann eine 2er Auswahl mit Radios freischalten bzw. sichtbar schaltet (mit den DIV-IDs und den Input IDs)? Mir geht es um die Schreibweise (technisch verstehe ich das ganze schon, nur die Sytax ist mir nicht klar). Wäre echt total super hilfreich für mich.

Vielen Dank vorab.

florian

Administrator

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Angenommen, Du hast ein Formular, in dem abhängig von der Auswahl "Sorte" entweder die Auswahl verschiedener Obs- oder Gemüsesorten angezeigt werden soll:

Dann wäre der Code im Miniform-Formular-Template

 <div  class="full">
                <label for="sorte"><span>Sorte</span> 
                    <div class="grouping {SORTE_ERROR}">
                        <input type="radio" id="i-sorte1" {SORTE_OBST} name="mf_sorte" value="Obst" /><label for="i-sorte1">Obst</label>
                        <input type="radio" id="i-sorte2" {SORTE_GEMÜSE} name="mf_sorte" value="Gemüse" /><label for="i-sorte2">Gemüse</label>
                    </div>
                </label>
            </div>
          <div id="obst-div">
            <div  class="full">
                <label for="obst"><span>Auswahl Obst</span> 
                    <div class="grouping {OBST_ERROR}">
                        <input type="radio" id="i-obst1" {OBST_APFEL} name="mf_obst" value="Apfel" /><label for="i-obst1">Apfel</label>
                        <input type="radio" id="i-obst2" {OBST_BIRNE} name="mf_obst" value="Birne" /><label for="i-obst2">Birne</label>
                    </div>
                </label>
            </div>
          </div>
          <div id="gemuese-div">
            <div  class="full">
                <label for="gemüse"><span>Auswahl Gemüse</span> 
                    <div class="grouping {GEMÜSE_ERROR}">
                        <input type="radio" id="i-gemüse1" {GEMÜSE_ERBSEN} name="mf_gemüse" value="Erbsen" /><label for="i-gemüse1">Erbsen</label>
                        <input type="radio" id="i-gemüse2" {GEMÜSE_BOHNEN} name="mf_gemüse" value="Bohnen" /><label for="i-gemüse2">Bohnen</label>
                    </div>
                </label>
            </div>
          </div>

und für das erforderliche CSS und JS legst Du einen Code2-Abschnitt vom Typ HTML auf derselben Seite an und fügst dort ein

<style type="text/css">
  #obst-div, #gemuese-div {display:none;}
</style>
<script>
  $('#i-sorte1').click(function() {
    $("#obst-div").toggle(this.checked);
    $("#gemuese-div").hide();
	});
  $('#i-sorte2').click(function() {
    $("#gemuese-div").toggle(this.checked);
    $("#obst-div").hide();
	});
</script>

Das jetzt als ganz einfaches Beispiel, man kann das natürlich auch alles viel eleganter mit Funktionen usw. machen.
Oder ein jquery-Plugin nutzen.

Beitrag geändert von florian (13.10.2023 14:55:11)

kisral

Mitglied

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Guten Morgen Florian,
vielen herzlichen Dank für deine Zeit! Das weiß ich zu schätzen.

Ich werde in der kommenden Woche an dem Formular arbeiten und ausprobieren, das so ins MiniFormular-Script einzufügen. Und ich werde berichten, wenn es fertig ist.

kisral

Mitglied

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Hallo Florian,
nochmals vielen Dank für deine Hilfe. Das hat wunderbar so funktioniert.

Nun ist es so, dass ich das Ganze auch aus einem umfangreichen Dropdownmenu benötige.

Dort werden über 100 Auswahloptionen drin sein. Bei einigen soll dann das versteckte Radio-Feld erscheinen, bei anderen wiederum nicht.

Beispiel:
Auswahloptionen im Dropdown von  1 - 10.  Option 4 und 5 sollen das Feld sichtbar machen, die anderen nicht.

Könntest du mir dazu die passenden Codefetzen schreiben für 2 Optionen, einmal mit sichtbarem, einmal mit unsichtbarem Feld. Ich weiß jetzt, wie das Prinzip funktioniert, aber ich hab Schwierigkeiten mit der passenden Syntax beim Dropdownmenu. Das Javascript dürfte ja gleich sein, oder?
Vielen Dank vorab.

florian

Administrator

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Über 100 Auswahloptionen, da würde ich mir als allererstes sehr ernste konzeptionelle Gedanken machen. Da ist ein Dropdown ganz sicher nicht das Mittel der Wahl, das ist doch nicht mehr handhabbar, weder redaktionell noch für die Nutzys.
Das heißt, da müsste so etwas wie eine mehrstufige Auswahl stattfinden, Stichwort jquery chained select.
Den Wert eines input type="radio" ist zudem tatsächlich etwas völlig anderes als rauszufinden, ob und welcher Wert in einem Dropdown-Select ausgewählt ist. Schon deshalb kann ich hier nicht mal so eben ein entsprechendes Codeschnipsel aus dem Ärmel zaubern.

kisral

Mitglied

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Ja, das ist ein Riesendropdown. Es geht um die Auswahl von Nationalitäten. Und da ist es wichtig, ob diese dann in der EU sind oder nicht.
Ich denke, ich mach eine Pflichtabfrage per Radio, ob EU oder nicht. Bei EU kommt ein Dropdown mit den EU-Ländern zur Auswahl, bei den Nicht-EU dann ein Eingabefeld für Nationalität und noch eine weitere Eingabe. Da kann ich dann die bisherige Technik verwenden.

Nochmals danke, deine Info hat mir geholfen.

webbird

Administrator

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Barrierefrei ist das nicht...

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

florian

Administrator

Re: MiniForm - Felder aktiv nach Eingabe in Chreckbox

Für eine Länderauswahl gibt es fertige Scripte:
https://www.google.com/search?client=fi … y+selector , z.B. https://github.com/mrmarkfrench/country-select-js