Alles anzeigenHey,
die Seite wird doch dabei nicht neu geladen. Siehe auch https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest
Ich habe es so gemeint:
showPic.html:
HTMLAlles anzeigen<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ShowPic with XMLHttpRequest</title> <script> window.onload = function() { // 1. Alle Checkboxen auswählen var checkboxes = document.querySelectorAll('input[type=checkbox]'); // auf alle checkboxen eine function ausführen checkboxes.forEach(function(event){ //eventListener click auf alle checkboxen intialisieren event.addEventListener("click", function(){ // Zu übertragende Daten festlegen und Request ausführen var data = new FormData(document.querySelector('form[name="picturegalerie"]')); var request = new XMLHttpRequest(); // Eventlistener load erstellen request.addEventListener("load", function(){ document.getElementById("bilderausgabe").innerHTML = this.responseText; }); // datei öffnen an die es gesendet wird request.open("POST", "showPicture.php", true); console.log(data); // daten senden request.send(data); }); }); } </script> </head> <body> <main> <form name="picturegalerie"> <label><input type="checkbox" name="natur" value="natur">Naturbilder</label> <label><input type="checkbox" name="sky" value="sky">Himmelbilder</label> <label><input type="checkbox" name="tornado" value="torndao">Tornadobilder</label> </form> <section id="bilderausgabe"> </section> </main> </body> </html>showPicture.php:
PHPAlles anzeigen<?php if(isset($_POST)){ $tornado = isset($_POST['tornado']) ? $_POST['tornado'] : null; $natur = isset($_POST['natur']) ? $_POST['natur'] : null; $sky = isset($_POST['sky']) ? $_POST['sky'] : null; if(!empty($tornado)){ $html = "<img src='pics/tornado.jpg'>"; echo $html; } }
Vielen Dank für deine Hilfe.
Hast du meinen Beitrag sehen?
Was haltest du von diesem Ansatz?
Kannst du mir dabei helfen dies zu voll enden?
Bin Dankbar um jede Hilfe 
