If checkbox , then Anchor visible

  • Hallo an alle,

    ich bin neu hier und hab noch nicht viel Ahnung mit CSS/Webprogrammierung.
    Kann mir jemand bitte hierbei helfen?

    Auf einem Anmeldeformular der Seite Eveeno kann man verschiedene CSS oder JAVAScript features einfügen.

    Das gesamte Script des anmeldeformulars findet ihr hier: https://eveeno.com/de/event-apped-form?eventnr=25307 oder Datei (CODE)

    Ich müsste folgendes hinzufügen:
    1) If eines der drei (BEGINNER TRACK COLLEGIATE SHAG ; BEGINNER TRACK BALBOA (342 - 372); EVENING TRACK (366-372) is checked, then (A) is visible

    (A) ZEILEN 433 - 483


    Code
    siehe Datei (A)


    2) IF SLOW BAL is checked (ZEILEN 358 - 364) then (B) (489 - 540) and (C) (1013-1032) is visible.


    Code
    <div id="C152-sub" class="xxSubField  check " data-xxcode='{"id":"160","name":"C152","parent":"C150","fieldorder":"51","type":"checkentry","type_inline":"0","scope":"","label":"Slow Bal Track","description":"","value":"","rules":"","main_option":"0","required":"0","hidden":"0","price":"0.00","price_unit":"EUR","price_taxed":"0.00","net1":"0.00","net2":"0.00","gross1":"0.00","gross1_label":"","gross2":"0.00","gross2_label":"","vat_rate1":"-1.0","vat_rate2":"-1.0","vat_rate":"-1.0","vat_reason1":"","vat_reason2":"","vat_country1":"","vat_country2":"","amount":"0","available_from":"","available_to":"","order_min":"0","order_max":"0","show_in_report":"1","show_in_ticket":"1","count_new":"0","count_confirmed":"0","count_waiting":"3","status":""}'>
        <input id="C152" name="C152" aria-describedby="C150-label" type="checkbox" value="C152"    />
        <span id="C152-label" class="xxSubLabel  check ">
            <span id="C152-sublabel" class="xxSubLabelText  check ">Slow Bal Track</span>
            <span id="C152-catinfo" class="xxCatinfo  check  hidden"></span>
        </span>
    </div>



    (B) Slow Bal Prices

    Code
    siehe Datei (B)

    (C) Slow Bal Level

    Code
    siehe Datein (C)

    3) If Shag 'n' Bal is checked (406-412) then (D) (821 - 1003) is visible


    Code
    <div id="C58-sub" class="xxSubField  radio " data-xxcode='{"id":"62","name":"C58","parent":"cat","fieldorder":"57","type":"radioentry","type_inline":"0","scope":"","label":"Shag &#039;n&#039; Bal Track","description":"","value":"","rules":"","main_option":"0","required":"0","hidden":"0","price":"50.00","price_unit":"EUR","price_taxed":"0.00","net1":"0.00","net2":"0.00","gross1":"0.00","gross1_label":"","gross2":"0.00","gross2_label":"","vat_rate1":"-1.0","vat_rate2":"0.0","vat_rate":"-1.0","vat_reason1":"","vat_reason2":"","vat_country1":"","vat_country2":"","amount":"0","available_from":"","available_to":"","order_min":"0","order_max":"0","show_in_report":"1","show_in_ticket":"1","count_new":"1","count_confirmed":"0","count_waiting":"4","status":""}'>
        <input id="C58" name="cat" aria-describedby="cat-label" type="radio" value="C58"  data-price='50.00' data-price_unit='EUR'  />
        <span id="C58-label" class="xxSubLabel  radio ">
            <span id="C58-sublabel" class="xxSubLabelText  radio ">Shag 'n' Bal Track</span>
            <span id="C58-catinfo" class="xxCatinfo  radio ">50,00 €</span>
        </span>
    </div>



    (D) Shag 'n' Bal - Class selection

    Code
    siehe -> Datei (D)




    Ich vermute, es sind insgesamt drei kurze Befehle und eine allgemeine HIDE-Funktion für (A),(B),(C) und (D).

    Hoffentlich kann mir jemand von euch hierbei helfen.
    Vielen Dank schonmal für eure Zeit und eure Hilfe.

    lg,
    Sirom

  • Auf einem Anmeldeformular der Seite Eveeno kann man verschiedene CSS oder JAVAScript features einfügen.

    Verstehe nicht was du meinst , ich konnte da nix finden.

    Das gesamte Script des anmeldeformulars findet ihr hier: https://eveeno.com/de/event-apped-form?eventnr=25307 oder Datei

    Link geht nur wenn man da eingeloggt ist, ich habe da kein Konto und kann es nicht sehen.


    Alles weitere ist für mich noch unklar was du da vorhast

  • Ich verstehe auch nichts. Der Code ist unleserlich und soweit ich das beurteilen kann, möchtest du ein paar if-Bedinungen irgendwo einfügen?

    If eines der drei (BEGINNER TRACK COLLEGIATE SHAG ; BEGINNER TRACK BALBOA (342 - 372); EVENING TRACK (366-372) is checked, then (A) is visible

    Mit so einem Pseudo Code kann man nichts anfangen, wenn man sich nicht mit dem Zeug auskennt, was du nutzt.

    Grundsätzlich funktionieren if-Bedinungen so:

    Code
    <script>
    if(BEGINNER TRACK COLLEGIATE SHAG == checked || BEGINNER TRACK BALBOA (342 - 372) == checked || EVENING TRACK (366-372) == checked {
        a.style.visibility = 'visible';
    }
    </script>

    Aber das wird dir wohl auch nicht weiterhelfen. Ansonsten weiß ich nicht, wie man da weiter helfen kann.

  • mitlerweile weiß ich was er meint.

    Er möchte seine eventseite bearbeiten.

    Die bieten da an ( wenn man Accound hat ) seine Eventseite mit den Baukasten und eigener Css und JS zu bearbeiten.


    Muß da auch erstmal durchblicken was vom Baukasten ist und was er selber dazu gebaut hat .

    Vorallem seine if bedingungen .

    Da muß ich erstmal rausfinden ob die mit den Baukasten Js abgefragt werden oder selber ein js zusammen Bauen muß und so.

  • Er möchte seine eventseite bearbeiten.

    Ja und hätte man das eigentliche Problem nicht bischen besser auf den Punkt bringen können, anstatt ordentlich Codestücke vom Baukasten in seinem Beitrag zu posten, die viel unnötigen Wirrwarr mit sich schleppen, welcher zur Problembeschreibung echt nicht hätte sein müssen?

    Sein Problem ist ja, wenn es sich wirklich nur um die paar Abfragen handelt, schnell gelöst, ohne das man soviel speziellen Code & einen Link nur für registrierte posten muss.

  • Hey Leute,
    tut mir leid. kenn mich eben nicht aus, wie man hier vor geht und was jemand braucht um mir da zu helfen.

    Aber ja, es geht einfach darum, ein paar IF bedingungen in eine EVENT-ANMELDEFORMULAR einzufügen. Genau basti1012, es ist eine Drag and Drop anmeldeformular, welches sehr einfach zusammenstellbar ist, jedoch sind keine IF Bedingungen dabei. Diese muss man sich mit CSS oder JAVASCRIPT selbst machen.(Siehe Bild)
    Eine Frage vorweg: Muss ich dann bei dem CSS CODE den ich selbst hinzufüge, den Code für das ganze Formular anführen, oder nur für die Teile, die ich bearbeiten/verändern möchte?

    Den CODE den ich im Anhang mitgesendet habe, ist der selbe vom link sorry, (dachte der ist auch sichtbar ohne login). Ich habe den einfach rauskopiert.

    Das hier ist der öffentliche Anmeldelink mit formular -> https://eveeno.com/alpine-jitterbugs-2020 . Ich habe den CODE einfach rauskopiert mit "Element untersuchen" um mal zu sehen, wie das Formular in CSS aufgebaut ist.

    Anhand meiner CODE-Stücke wollte ich versuchen euch darzustellen, um welche Checkboxes (ZEILEN IM CODE) es sich handelt, die die IF bedingung beinhalten sollten und welche Anmeldeformular-Teile THEN sichtbar werden sollten.

    tut mir leid wenn ich die fragestellung so komplex formuliert hatte.

    Danke für eure Hilfe und Geduld,
    Sirom

  • Wenn ich den Code hinzufüge, kann ich den hier einfügen (siehe Bild).

    Die Seite gibt eine Vorlage (welche ihr wahrscheinlich nicht braucht (siehe VORLAGE CODE)

  • Seine erklärung und der Code dazu ist nee Katastrophe.

    Man hätte von Anfang an sagen sollen das man dafür Eingeloggt sein muß.

    Selbst dann sieht man den Inhalt des Links nicht weil er nur mit sein Accound sichtbar ist.


    Mit der erklärung und den ganzen Baukasten kram( Formular Elemente) konnte ich das erstmal nur so machen.

    Kopier den Code unter Einstellungen bei Javascript rein da wo css und Js selber geschrieben werden darf.


    Wenn alles läuft kannst du die ganzen Console.log Zeilen auch raus löscheh.


    Mußt du mal kucken ob es mit den <script> </script> sein muß oder ohne.

    Denke mal das man die da weg machen muss

  • Nicht wirklich if-Bedingungen, aber was der TO in dem Pseudocode beschreibt, kann man schon mit CSS realisieren und zwar mit Pseudoklassen. Er will ja, wenn eine Checkbox gecheckt ist, ein anderes Element sichtbar machen. Das funktioniert dann so:

    Code
    .cb1:checked~.another-ele-1 {
        display: block;
    }

    Es gelten die üblichen Einschränkungen, dass man auf diese Weise keine Elemente adressieren kann, die im Baum darüber oder davor liegen. Diese lassen sich jedoch weitgehend umgehen, wenn man Labels verwendet, diese lassen sich beliebig platzieren.

  • Ja das ist ne Möglichkeit, allerdings gehört das für mich zum Funktionsumfang der Website und gehört wie ich finde nach Javascript hin. Aber das kann natürlich jeder selbst entscheiden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!