Checkbox Auswahl

Hier ein Beispiel mit einem Script von Werner-Zenk.de zur Anzeige von Bildern und Beschreibungen mittels Checkbox

Los

Checkbox Auswahl

Wähle eine oder mehrere Kriterien über die Checkboxen zur Darstellung von Bildern.
Beschreibung zu der Version vom 16.09.2017.
Skripte von Werner-Zenk.de

Szene Preis Art






Tutorial für Checkbox Auswahl

Bitte downloadet die ZIP Datei von der Seite von Werner-Zenk.de. Dort findet Ihr die vollständigen Skripte mit Beispielen. Bitte kopiert die Skripte aus dem Download oder nur in deutscher Sprache von dieser Seite hier (Google Übersetzer).

Kopiert zunächst dieses JavaScript in die > Page-Settings > "Inside <head> code"

  <!-- Script für Checkboxen Auswahl -->
  <script>
    // Checkboxen JavaScript-Funktion zuweisen
    window.addEventListener('load', function() {
     var article = document.getElementById("selectform");
     var groups = article.getElementsByTagName('input');
     for (var i = 0; i < groups.length; i++) {
      groups[i].addEventListener("click", sel);
     }
    });
    // Das XMLHttpRequest-Objekt setzen
    var xhr = new XMLHttpRequest();
    function sel() {
     // Die Formulardaten holen
     var data = new FormData(document.getElementById("selectform"));
     // Die Datei: "auswahlform_ausgabe.php" über dem HTTP-Stream öffnen
     xhr.open("POST", "auswahlform_ausgabe.php", true);
     // Die Formulardaten senden
     xhr.send(data);
     // Auf eine Antwort warten
     xhr.onreadystatechange = function() {
     // Daten werden (vom PHP-Script) empfangen
     if (xhr.readyState == 4 &&
          xhr.status == 200) {
       document.getElementById("output").innerHTML = xhr.responseText;
      }
     }
    }
  </script>

Zieht Euch nun einen Textblock auf der Seite auf und ersetzt im Code-Editor den Text mit dem Formular unten. Ich habe diese Tabelle hier auf jeweils 2 Zeilen reduziert und die Beschreibungen angepasst. Der unterste <div> Container mit der id="output" wird die Ausgabe der Auswahl zeigen, die mit der unveränderten Datei "auswahlform_ausgabe.php" aus dem Download angezeigt wird.

                <!-- Beginn Formular mit Checkboxen für die Ausgabe -->
                <form id="selectform">
                    <table class="table">
                        <tr>
                         <th>Szene</th>
                         <th>Preis</th>
                         <th>Art</th>
                        </tr>
                        <tr>
                         <td>
                         <!-- Checkbox "Szene" -->
                         <label><input type="checkbox" name="painter[]" value="Maritim" onClick="sel()"> Maritim</label><br>
                         <label><input type="checkbox" name="painter[]" value="Natur" onClick="sel()"> Natur</label><br>
                        </td>
                        <td>
                         <!-- Checkbox "Preis" -->
                         <label><input type="checkbox" name="price[]" value="250€" onClick="sel()"> 250 Euro</label><br>
                         <label><input type="checkbox" name="price[]" value="350€" onClick="sel()"> 350 Euro</label><br>
                        </td>
                        <td>
                         <!-- Checkbox "Art" -->
                         <label><input type="checkbox" name="art[]" value="Urlaub 2017" onClick="sel()"> Urlaub 2017</label><br>
                         <label><input type="checkbox" name="art[]" value="Im Grünen" onClick="sel()"> Im Grünen</label><br>
                        </td>
                        </tr>
                    </table>
                </form>
                <!-- Ende Formular mit Checkboxen für die Ausgabe -->
                <!-- Ausgabe der Daten -->
                <div id="output"></div>
CSS




Weiterhin habe ich auch die CSS aus dem Skript von Werner übernommen und in den Bereich CSS-Editor vom Code-Editor kopiert.

Achtet auf die Eigenschaft "max-width", die ich bei den unteren beiden Klassen noch hinzugefügt habe, damit das auch am Smartphone richtig angezeigt wird.

Kopiert nun noch das Verzeichnis "images" (mit Euren Bildern) in das gleiche Verzeichnis, indem sich diese Seite mit dem Einbau der Skripte befindet. Das ist hier das Stammverzeichnis (Root) meines Mobirise-Projektes.

Weiterhin kopiert Ihr auch die Ausgabe-Datei "auswahlform_ausgabe.php" in die Root.

Die CSV-Datei "artikel.csv" gehört ebenfalls in die Root und zeigt den Text und die Dateinamen der Bilder an, die bei mir folgenden Inhalt hat. Achtet darauf, das die Kodierung der CSV-Datei
"UTF-8 ohne BOM" beibehält.

Maritim;250€;Urlaub 2017;60x120cm;187-1287;Schiff1.jpg
Natur;250€;Im Grünen;50x100cm;187-2245;Natur1.jpg
Maritim;350€;Urlaub 2017;55x80cm;187-4477;Schiff2.jpg
Natur;350€;Im Grünen;70x130cm;187-5822;Natur2.jpg
Maritim;250€;Urlaub 2017;80x60cm;187-6891;Schiff3.jpg
Natur;350€;Im Grünen;40x30cm;187-7120;Natur3.jpg

Mobirise Tutorials Mobirise4 AgencyM4 PortfolioM4 Datenschutz

© Copyright 2017 Mobirise Tutorials
Für Google Translate funktionale Cookies akzeptieren