Hidden & Show

The_C · 01. Sep. 2022

Hallo an die Experten,

brauche mal wieder Hilfe, hab hier mal den HTML Code reingestellt weil er doch etwas länger ist.

Nun zu meiner Frage:

Im HTML Code ist jeder Block mit der class ummantel

HTML:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1">

es sind genau 4 Blöcke.

Der 1. Block soll immer auf der Seite sein der dient zur Auswahl um die anderen Blöcke ein und aus zu schalten darin sind 3 Auswahl Optionen die sollen die anderen Blöcke steuern und zwar so:

HTML:

<option value="ÖNM">Starte bei Newcomers</option>

soll nur den 2 Block erscheinen lassen.

HTML:

<option value="ÖNM & IÖM">Starte bei beiden Bewerben</option>

soll alle Blöcke erscheinen lassen

HTML:

<option value="IÖM">Starte bei Championships</option>

soll nur den 3 Block und den 4 Block erscheinen lassen

Wie kann man das mit JS oder jQuery umsetzen ich sehe da keine Möglichkeit weil alle class gleich heißen aber eventuell gibt es auch dafür eine Lösung weil ich kann den Code nicht verändern.

Vielen Dank schon jetzt für Eure Hilfe

Bildschirmfoto 2022-09-01 um 08.24.39.jpg

mikdoe · 01. Sep. 2022

The_C schrieb:
Wie kann man das mit JS oder jQuery umsetzen ich sehe da keine Möglichkeit weil alle class gleich heißen aber eventuell gibt es auch dafür eine Lösung weil ich kann den Code nicht verändern.

Was genau meinst du mit "ich kann den Code nicht verändern"?

The_C · 01. Sep. 2022

keine eigenen classen zu den blöcken hinzufügen also das HTML darauf hab ich keinen Einfluß
Hier hab ich ein Beispiel gefunden leider benötigt das auch eigene classen aber so sollte die Funktion sein nur mit meiner HTML Vorlage: https://jsfiddle.net/solodev/dpo07Ly5/

mikdoe · 01. Sep. 2022

Wenn du auf das document nicht zugreifen kannst, wo würdest du den JS Code denn hin schreiben?

The_C · 01. Sep. 2022

ich habe nur auf das formular keinen Zugriff aber auf das js schon

mikdoe · 01. Sep. 2022

Und wenn du den gezeigten Beispielcode versuchst in deinen Fall zu übernehmen, welche Fragen kommen dann hoch?

The_C · 01. Sep. 2022

AW: Hidden &amp;amp; Show

wie setze ich das um wenn ich keine individuellen classen im html setzen kann.
z.b das kann ich schon nicht machen id="otherFieldDiv":

PHP:

<div class="form-group" id="otherFieldDiv">

das einzige was sich bei meinem Code ändert ist das:

PHP:

for="registration_membership-173-multiselect-2"

und die

PHP:

id="registration_membership-173-multiselect-2"

Aber keine Ahnung ob ich das nutzen kann und wie das gemacht wird.

HTML:

#otherFieldDiv

das kann ich nicht machen.

Hier mein Code den ich gebaut habe aber es stimmt nich sollte für den 2 Block sein:

PHP:

$("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "ÖNM") {
      $('#otherFieldDiv').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
    } else {
      $('#otherFieldDiv').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

Das sind die ersten 2 Blöcke:

HTML:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1">
    <div class="form-group">
        <label class="control-label" for="registration_membership-173-singleselect-8">Wettbewerb Auswahl</label>
        <div class="input">
            <select required="required" class=" form-control" id="registration_membership-173-singleselect-8"
                name="tx_form_formframework[registration_membership-173][singleselect-8]">
                <option value="ÖNM">Starte bei Newcomers</option>
                <option value="ÖNM & IÖM">Starte bei beiden Bewerben</option>
                <option value="IÖM">Starte bei Championships</option>
            </select>
        </div>
    </div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1">
    <div class="form-group">
        <label class="control-label" for="registration_membership-173-multiselect-2">
            Newcomers Starklassen auswählen
        </label>
        <div class="input">
            <input type="hidden" name="tx_form_formframework[registration_membership-173][multiselect-2]"
                value="" /><select required="required" class="xlarge form-control"
                id="registration_membership-173-multiselect-2" multiple="multiple"
                name="tx_form_formframework[registration_membership-173][multiselect-2][]">
                <option value="NO">Starte nicht bei Newcomers</option>
                <option value="Junioren Classic">Junioren Classic</option>
                <option value="Bikini Fitness">Bikini Fitness</option>
            </select>
        </div>
    </div>
</div>

- - - Aktualisiert - - -

Ich denke ich hab die Lösung:

PHP:

$("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "ÖNM") {
      $('.rc_form__col:nth-child(2)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

- - - Aktualisiert - - -

Nur leider erkennt er das nicht "ÖNM & IÖM" hier werden mir nicht alle 3 Elemente angezeigt gibt es dafür eine Lösung?
Hab auch schon statt dem & ein & probiert oder ist es der Abstand zwischen den Wörtern...

PHP:

$("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "ÖNM & IÖM") {
      $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').attr('required', '');
      $('#registration_membership-173-multiselect-2,#registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').removeAttr('required');
      $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

- - - Aktualisiert - - -

Nein das ist es leider auch nicht mit dem ÖNM & IÖM da stimmt irgendwas nicht mit dem Code sobald ich den mittleren Teil Einkommentiere werden mir der erste und der Letzte Code ignoriert und nur noch der einkommentierte funktioniert was ist den da falsch?

Hier der ganze JS Code:

PHP:

$("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "ÖNM") {
      $('.rc_form__col:nth-child(2)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

  $("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "ÖNM & IÖM") {
      $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-3').attr('required', '');
      $('#registration_membership-173-singleselect-5').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
      $('#registration_membership-173-multiselect-3').attr('data-error', 'This field is required.');
      $('#registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-3').removeAttr('required');
      $('#registration_membership-173-singleselect-5').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
      $('#registration_membership-173-multiselect-3').removeAttr('data-error');
      $('#registration_membership-173-singleselect-5').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

  $("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "IÖM") {
      $('.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-3').attr('required', '');
      $('#registration_membership-173-singleselect-5').attr('required', '');
      $('#registration_membership-173-multiselect-3').attr('data-error', 'This field is required.');
      $('#registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-3').removeAttr('required');
      $('#registration_membership-173-singleselect-5').removeAttr('required');
      $('#registration_membership-173-multiselect-3').removeAttr('data-error');
      $('#registration_membership-173-singleselect-5').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

mikdoe · 01. Sep. 2022

AW: Hidden &amp;amp; Show

Der hinzugefügte Code muss im selben Zeichensatz gespeichert werden wie der schon bestehende.

The_C · 01. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

Sorry verstehe ich nicht kannst mir den Mittelteil zeigen wie der aussehen muss?
Das geht auch nicht Ka. was du meinst.

PHP:

$("#registration_membership-173-singleselect-8").change(function () {

    if ($(this).val() == "ÖNM") {
      $('.rc_form__col:nth-child(2)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
    };

    if ($(this).val() == "ÖNM & IÖM") {
      $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-3').attr('required', '');
      $('#registration_membership-173-singleselect-5').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
      $('#registration_membership-173-multiselect-3').attr('data-error', 'This field is required.');
      $('#registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-3').removeAttr('required');
      $('#registration_membership-173-singleselect-5').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
      $('#registration_membership-173-multiselect-3').removeAttr('data-error');
      $('#registration_membership-173-singleselect-5').removeAttr('data-error');
    };

    if ($(this).val() == "IÖM") {
      $('.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-3').attr('required', '');
      $('#registration_membership-173-singleselect-5').attr('required', '');
      $('#registration_membership-173-multiselect-3').attr('data-error', 'This field is required.');
      $('#registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-3').removeAttr('required');
      $('#registration_membership-173-singleselect-5').removeAttr('required');
      $('#registration_membership-173-multiselect-3').removeAttr('data-error');
      $('#registration_membership-173-singleselect-5').removeAttr('data-error');
    };
    
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

- - - Aktualisiert - - -

Und das funktioniert auch nicht :
der erste zeigt nix an
der zweite zeigt zeigt eines obwohl er alles anzeigen müsste
der dritte zeigt als einziger das richtige an

PHP:

$("#registration_membership-173-singleselect-8").change(function () {

    if ($(this).val() == "ÖNM") {
      $('.rc_form__col:nth-child(2)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

  $("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "ÖNM & IÖM") {
      $('.rc_form__col:nth-child(2)').show();
      $('.rc_form__col:nth-child(3)').show();
      $('.rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-2').attr('required', '');
      $('#registration_membership-173-multiselect-3').attr('required', '');
      $('#registration_membership-173-singleselect-5').attr('required', '');
      $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
      $('#registration_membership-173-multiselect-3').attr('data-error', 'This field is required.');
      $('#registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(2)').hide();
      $('.rc_form__col:nth-child(3)').hide();
      $('.rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-2').removeAttr('required');
      $('#registration_membership-173-multiselect-3').removeAttr('required');
      $('#registration_membership-173-singleselect-5').removeAttr('required');
      $('#registration_membership-173-multiselect-2').removeAttr('data-error');
      $('#registration_membership-173-multiselect-3').removeAttr('data-error');
      $('#registration_membership-173-singleselect-5').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

  $("#registration_membership-173-singleselect-8").change(function () {
    if ($(this).val() == "IÖM") {
      $('.rc_form__col:nth-child(3)').show();
      $('.rc_form__col:nth-child(4)').show();
      $('#registration_membership-173-multiselect-3').attr('required', '');
      $('#registration_membership-173-singleselect-5').attr('required', '');
      $('#registration_membership-173-multiselect-3').attr('data-error', 'This field is required.');
      $('#registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');
    } else {
      $('.rc_form__col:nth-child(3)').hide();
      $('.rc_form__col:nth-child(4)').hide();
      $('#registration_membership-173-multiselect-3').removeAttr('required');
      $('#registration_membership-173-singleselect-5').removeAttr('required');
      $('#registration_membership-173-multiselect-3').removeAttr('data-error');
      $('#registration_membership-173-singleselect-5').removeAttr('data-error');
    }
  });
  $("#registration_membership-173-singleselect-8").trigger("change");

- - - Aktualisiert - - -

https://jsfiddle.net/The_C/5nb9jv41/2/

mikdoe · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

Bei Umlauten ist überall der selbe Zeichensatz zu verwenden, also im Editor, in der DB, die Angabe im HTML usw. Auf Windows ist ANSI/ISO-8859-1 bzw. -15 Standard. In den Browsern (und m. W. auch in Datenbanken) ist UTF-8 Standard. Welchen Editor nutzt du, wie hast du den Quellcode gespeichert und welcher charset steht im HTML (meist oben im <head>)?

The_C · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

Ja ich verwende UTF-8 aber das wird doch nicht das Problem sein weil weshalb funktioniert es dann auch nicht wenn ich ein reines HTM aus dem Code mache und der Editor und das charset auf UTF-8 eingestellt ist?

Ich versuche jetzt mal aus dem HTML alle Umlaute zu entfernen dann sollte es ja deinen Meinung nach funktionieren. Ein Moment...

Hab das gerade ausprobiert mit TEST1 TEST2 und TEST3 Und NEIN das hat nix mit UTF-8 oder oder irgendwelchen charsets zu tun.

Hier ist die Änderung zu sehen: https://jsfiddle.net/The_C/5nb9jv41/10/ ohne Umlaute!

mikdoe · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

In deinem Fiddle ist ein Syntaxfehler. Mach' ma' bitte die Konsole mit F12 an und behebe erst mal alle Fehler.

The_C · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

https://jsfiddle.net/The_C/5nb9jv41/17/

mikdoe · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

Habe dir eine Debug Ausgabe eingefügt: https://jsfiddle.net/Ls2n63ad/

Das beweist, dass es nicht an den Umlauten liegt sondern an den anderen Kommandos in diesem Code Bereich.

The_C · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

War mir schon klar ;-) nur wie wird das richtig gemacht das war meine Frage von Anfang an.
Er zeigt ja auch in der console alles an:

PHP:

console.log($('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show());

0,00 Plan was da los ist.

mikdoe · 02. Sep. 2022

AW: Hidden &amp;amp;amp;amp; Show

Man könnte durch das DOM iterieren bis zur gewünschten Stelle. Beispielsweise mit https://api.jquery.com/each

Deine Fragen sind so dermaßen daneben, das musst du dringend verbessern! Das Thema hat nichts mit 4 Blöcken, nichts mit Umlauten, nichts mit Mantel und auch nichts mit Formular zu tun. Gesucht wird hier schlicht die Syntax für einen JQuery Selector bzw. das Selektieren einer Node (was fast das selbe ist).

Und ich weiß auch nicht, warum du den Code im Fiddle nicht verringerst. 80 % des Codes werden für die Frage überhaupt nicht benötigt. Reinste Zeitverschwendung!

Ergänzung: das sollte von mir positive Kritik sein im Sinne von: je konkreter die Frage ist, desto schneller wird dir geantwortet und du kommst weiter. Alles andere verbrennt dein Zeit und die aller Leser.

daniel220786 · 02. Sep. 2022

Gott sei Dank sieht das noch einer so.
Ich wollte die ganze Zeit schon was sagen , habe aber gedacht das ich doof bin. Der ganze Kram mit require und data Attributen zu löschen und wieder zu setzen verstehe ich einfach nicht was das sollte.

Wenn es nur darum geht bei einer bestimmten Auswahl im select , bestimmte ( Blöcke ) einzublenden und andere auszublenden ,l sollte das mit paar Zeilen Code erledigt sein (selbst ohne den JQuery Kram )

The_C · 03. Sep. 2022

Sorry ich bin nicht in der Lage den Code selber zu schreiben so das er funktioniert und genau deswegen habe ich hier um Hilfe gebeten.
Wie der Code im Endeffekt aufgebaut wird ist mir komplett egal ich muss nicht jQuery nehmen aber ich hab nun mal so ein Beispiel im Netz gefunden und es auf meine Bedürfnisse angepasst aber es muss ja nicht das genommen werden wenn ihr eine bessere und kompaktere Lösung habt ich bin für alles offen und lerne gerne was neues!

Aber ich bin doch schon etwas verwirrt das ihr die Frage nicht verstanden habt.

Am Fiddle Beispiel https://jsfiddle.net/Ls2n63ad/ sieht man doch schon gleich was ich möchte die Auswahl "Starte bei beiden Bewerben" sollte alles anzeigen das von der Auswahl "Starte bei Newcomers" und "Starte bei Championships" also noch genauer kann ich das nicht beschreiben.

Aber gut jetzt habt ihr es ja verstanden und ich entschuldige mich wenn das nicht so angekommen ist und bitte noch mal um eine Lösung Danke.

mikdoe · 03. Sep. 2022

Jetzt bleibt aber noch das Problem, dass die Vorleistung (Code reduzieren und dadurch das Problem isolieren) und die Frage fehlen. Für fertige Lösungen wird es schwer sein, weil ja jeder mit seinen Sachen mehr als genug zu tun hat.
Einen Hinweis habe ich dir gegeben. Hast du dir das angeschaut und überlegt wie das helfen könnte? Gibt es dazu Fragen?

The_C · 03. Sep. 2022

Klar hab ich mir das angeschaut nur wenn man sehr wenig davon versteht ist schwer.
Fragen hab ich genug

nur stell ich die anscheinend auch falsch also ich bin Schach matt...

Wie kann mir das Beispiel helfen da wird .each verwendet und nicht .change aber es wird auch dort mit if und else gearbeitet so wie auch bei meinen Code und ich denke auch so wie ich gearbeitet habe ist das nicht ganz falsch den es stimmen ja wenigstens 2 Auswahlpunkte ich denke dieser Teil

Code:

$(this).val() == "ÖNM & IÖM"

muss auch in den neuen Code keine Ahnung wie gesagt ich bin Schach matt...

Jedoch eine Aussage wundert mich dann schon von @daniel220786 der sagte ja:

"
Wenn es nur darum geht bei einer bestimmten Auswahl im select , bestimmte ( Blöcke ) einzublenden und andere auszublenden ,l sollte das mit paar Zeilen Code erledigt sein (selbst ohne den JQuery Kram )
"

Also ist das schnell erledigt, aber gut viel geschrieben und immer noch keine Lösung.

Danke für Eure Hilfe aber jetzt hab ich auch eine Lösung gefunden

Keine Ahnung ob das so richtig ist aber es tut genau das was es soll.
Kann man das noch verbessern also den Code kleiner halten?
https://jsfiddle.net/The_C/5nb9jv41/

Hidden & Show

New member

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

New member

Moderator

New member