Beiträge von h3llo

h3llo · 4. Oktober 2021

Vielen Dank! Mit dem PHPMailer funktioniert es

h3llo · 4. Oktober 2021

Hallo,

ich habe eine Seite, auf der sich ein Nutzer registrieren kann. Nach dem Klick auf "Registrieren" soll dem Nutzer eine E-Mail mit einem Link zur Bestätigung seiner Registrierung geschickt werden. Dafür habe ich die mail()-Funktion von PHP verwandt. Leider kommen die Mails nicht an. Getestet habe ich das Ganze mit einem IONOS Webspace und einer IONOS Absende E-Mail Adresse und einer IONOS und einer Outlook E-Mail Adresse als Ziel.

Hier der Code für das Versenden der Mail:

Code

        $to = $email;
        $subject = 'Registrierung';
        $url = 'https://www.example.de/registrierungsstatus.php?selector='.$selector.'&validator='.bin2hex($token);
        $message = '
            <p>Klicken Sie auf den folgenden Link, um Ihre Registrierung abzuschließen.</p>
            <a href="'.$url.'">'.$url.'</a>
            ';
        $headers = 'From: Example <mail@example.de>\r\n Reply-To: mail@example.de\r\n Content-type: text/html\r\n';
        mail($to, $subject, $message, $headers);

Hier eine Testseite: tobiaspietsch.de/registrierung.php

Wie kriege ich die Mails an die Zieladresse versandt?

h3llo · 4. Oktober 2021

Zitat

Was war denn jetzt der Knackpunkt? Zuerst hattest Du ja geschrieben, dass es noch nicht funktioniert.

Da ich alles gleichzeitig umgesetzt habe, kann ich es nicht genau sagen. Aber sehr wahrscheinlich war es das Javascript, das einen Error erzeugt, wenn der Button nicht existiert. (Den Code habe ich in ein If-Statement gesetzt, das zunächst geprüft, ob der Button existiert.)

Code

            if (event.target.classList.contains('entfernenbutton')) {
                $('#liste').load('elementauslisteentfernen.php', {
                    nummerElement: event.target.value
                });
            }

Der Code funktioniert leider nicht. Der Button zeigt keine Reaktion.

h3llo · 1. Oktober 2021

Ich habe nun soweit alle eure Hinweise umgesetzt, außer:

Zitat

Für jede ID hast du einen eigenen Modal schließen Code.

Das geht auch über die Klasse und spart nee Menge Code

Da weiß ich nicht genau, wie das geht.

Und

Zitat

Dann würde in noch onclick in addEventListener ändern.

habe ich beim Entfernen-Button nicht umgesetzt. Da weiß ich nicht, wie ich addEventListener zusammen mit Event-Bubbling anwende.

Ansonsten funktioniert der Code nun soweit!

h3llo · 30. September 2021

Zitat

Das war doch das Projekt richtig.

Ja, genau.

Danke erstmal für die vielen Hinweise. Werde mich dran setzen und den Code entsprechend ändern.

Zitat

Was die Vielzahl an PHP-Dateien betrifft, so hatte ich h3llo hier schon einen Hinweis gegeben, wie man es entscheidend vereinfachen kann:

Klick-Event mehrmals ausgeführt

Deine Änderungshinweise habe ich auch umgesetzt. eaneingabe.php, film.php, liste.php und filmerstellen.php sind raus geflogen und der Code aus diesen wurde direkt in index.php geschrieben. Außerdem habe ich mir auf deinen Hinweis hin meine anderen Dateien nochmal vorgenommen und auch da einiges raus geschmissen. Also kein Grund zum Ärger!

h3llo · 28. September 2021

filmaktualisieren.php:

PHP

<?php
    //Falls der Button gedrückt wurde
    if(isset($_GET['losbutton'])) {
        //EAN-Eingabe in Textfeld speichern
        $ean = trim($_GET['textfeld'], ' ');
        //Falls die EAN 13-stellig ist und eine ganzzahlige Zahl
        if (strlen($ean) == 13 AND is_numeric($ean) AND !strpos($ean, '.') AND !strpos($ean, 'e')) {
            //Hier werden eigentlich die Filmdaten ermittelt. Der Einfachheit halber sehen diese
            //hier nur wie folgt aus:
            //EAN
            $_SESSION['ean'] = 'A';
            //Titel
            $_SESSION['titel'] = 'B';
            //Disctyp
            $_SESSION['disctyp'] = 'C';
            //Besonderheiten
            $_SESSION['besonderheit'] = 'D';
        }
    }
    //Falls kein Film gespeichert ist
    if(!isset($_SESSION['ean'])) {
        echo '
        <div id="leererfilm_container">
            <p id="leererfilmtext">Geben Sie eine EAN ein und klicken Sie auf "Los".</p>
        </div>
        ';
    }
    //Falls ein Film gespeichert ist
    else {
        //Daten ausgeben
        echo '<div class="filmelement">';
        echo '
            <p class="textfilmelement">'.$_SESSION['titel'].' ('.$_SESSION['ean'].')</p>
            <p class="textfilmelement">'.$_SESSION['disctyp'];
        //Falls die Besonderheiten nicht leer sind
        if($_SESSION['besonderheit'] != '') {
            echo ', '.$_SESSION['besonderheit'];
        }
        echo '</p>';
        echo '
        </div>
        ';
    }
?>

Alles anzeigen

listeaktualisieren.php:

PHP

<?php 
    echo '<div id="filmliste">';
    if (isset($_SESSION['filme'])) {
        //Falls die Liste leer ist
        if(count($_SESSION['filme']) == 0) {
            echo '
                <div id="leereliste_container">
                    <p id="leerelistetext">Ihre Liste ist leer.</p>
                </div>
            ';
        }
        //Falls die Liste nicht leer ist
        else {
            //Gehe alle Einträge im Array filme durch
            For ($i = 0; $i <= count($_SESSION['filme']) - 1; $i++) {
                //Daten ausgeben
                echo '
                    <div class="listenelement">
                        <div class ="datenfilmelement">
                            <p class="textfilmelement">'.$_SESSION["filme"][$i][1].' ('.$_SESSION["filme"][$i][0].')</p>
                            <p class="textfilmelement">'.$_SESSION["filme"][$i][2];
                //Falls die Besonderheiten nicht leer sind
                if($_SESSION['filme'][$i][3] != '') {
                    echo ', '.$_SESSION['filme'][$i][3];
                }
                echo '      </p>
                        </div>
                        <div class ="entfernenbuttonfilmelement">
                            <p class="textfilmelement"><button id="entfernenbutton" type="button" class="entfernenbutton" value="'.$i.'">Entfernen</button>&nbsp; &nbsp; &nbsp;</p>
                        </div>
                    </div>
                ';
            }
        }
    }
    //Falls der Session Array filme nicht existiert
    else {
        echo '
            <div id="leereliste_container">
                <p id="leerelistetext">Ihre Verkaufsliste ist leer.</p>
            </div>
        ';
    }
    echo '</div>';
?>

Alles anzeigen

listeneueneintraghinzufuegen.php:

PHP

<?php
    //Session starten
    session_start();
    //Falls der Button gedrückt wurde
    if (isset($_POST['hinzufuegenButtonGedrueckt'])) {
        //Falls die Session Variable ean gesetzt ist
        if (isset($_SESSION['ean'])) {
            //Daten in Listenarray eintragen
            $_SESSION['filme'][] = array($_SESSION['ean'], $_SESSION['titel'], $_SESSION['disctyp'], $_SESSION['besonderheit']);
        }
        //Liste aktualisieren
        include 'listeaktualisieren.php';  
    }
?>

Alles anzeigen

elementauslisteentfernen.php:

PHP

<?php
    //Session starten
    session_start();
    //Falls der Button gedrückt wurde
    if (isset($_POST['nummerElement'])) {
        //Falls der Session Array filme existiert
        if(isset($_SESSION['filme'])) {
            //Entsprechendes Element aus Array entfernen
            array_splice($_SESSION['filme'], $_POST['nummerElement'], 1);
            //Liste aktualisieren
            include 'listeaktualisieren.php';
        }
    }
?>

Alles anzeigen

listeloeschen.php:

PHP

<?php
    //Session starten
    session_start();
    //Falls der Button gedrückt wurde
    if (isset($_POST['loeschenButtonGedrueckt'])) {
        //Falls der Session Array filme existiert
        if(isset($_SESSION['filme'])) {
            $_SESSION['filme'] = array();
            //Liste aktualisieren
            include 'listeaktualisieren.php'; 
        }
    }
?>

Alles anzeigen

index.css:

Code

/* --> Modal <-- */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modalheader {
  height: 50px;
  background-color: RGB(0, 0, 130);
}
.modal_inhalt {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
}
.modaltext {
  padding: 20px;
}
.closemodal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 10px;
}
.closemodal:hover, .closemodal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Alles anzeigen

h3llo · 28. September 2021

Zitat

Kannst du einen vollständigen Testbaren Code posten?

Hier folgt der Code. Ich habe einiges, was nicht relevant ist, raus gekürzt. Daher sieht der Code an einigen Stellen etwas zusammengewürfelt aus. Die Kommentare habe ich im Wesentlichen drin stehen lassen, damit es etwas übersichtlicher wird:

index.php:

PHP

<?php
    session_start();
?>
<div class="top">
    <?php
        include 'header.php';
    ?>
    <div id="main">
        <div id="eanmodal" class="modal">
            <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="eanmodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">TEXT</p>
            </div>
        </div>
        <div id="hinweismodal" class="modal">
            <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="Hinweismodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">TEXT2</p>
            </div>
        </div>
        <div id="listeloeschenmodal" class="modal">
            <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="listeloeschenmodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">Möchten Sie die komplette Liste wirklich löschen?</p>
                <button id="listeloeschenbestaetigenbutton" class="listenbutton" value="Liste l&ouml;schen">Liste löschen</button>
                <button id="listeloeschencancelbutton" class="listenbutton" value="Cancel">Cancel</button>
            </div>
        </div>
        <div id="einundausgabe">
            <?php
                if(isset($_GET['textfeld'])) {
                    //Falls die EAN eine ganzzahlige 13-stellige Zahl ist
                    if (strlen($_GET['textfeld']) == 13 AND is_numeric($_GET['textfeld']) AND !strpos($_GET['textfeld'], '.') AND !strpos($_GET['textfeld'], 'e')) {
                        $_SESSION['ausgabe']= $_GET['textfeld'];
                    }
                }
                //Falls die Sessionvariable 'ausgabe' nicht gesetzt ist oder die Sessionvariable
                //'geradeAusgeloggt' gesetzt ist und der Nutzer ausgeloggt ist
                if((!isset($_SESSION['ausgabe']) OR isset($_SESSION['geradeAusgeloggt'])) AND !isset($_SESSION['nutzerid'])) {
                    ?>
                    <div id="eingabe_container">
                        <div id="ean">
                            <a href="#" id="eanlink">EAN</a>
                        </div>
                    </div>
                    <?php
                }
                //Falls die Sessionvariable 'ausgabe' gesetzt ist
                else {
                    ?>
                    <div id="ausgabe_container">
                        <div id="trennereingabeausgabe" style="height: 30px;">
                        </div>
                        <div id="ausgabe_film">
                            <div id="film_container">
                                <div id="film">
                                    <?php
                                        include 'filmaktualisieren.php';
                                    ?>
                                </div>
                                <br>
                                <div id="hinweis">
                                    <p class="textfilmelement"><a href="#" id="hinweislink">Hinweis</a></p>
                                </div>
                                <div id="filmbutton">
                                    <button id="hinzufuegenbutton" class="button" value="Hinzuf&uuml;gen">Zur Liste hinzufügen</button>
                                </div>
                            </div>
                        </div>
                        <div id="trenner">
                        </div>
                        <div id="ausgabe_liste">
                            <div id="liste">
                                <?php
                                    include 'listeaktualisieren.php';
                                ?>
                            </div>
                            <div id="listenbuttons">
                                <button id="listeloeschenbutton" class="listenbutton" value="Liste l&ouml;schen">Liste löschen</button>
                            </div>
                        </div>
                        <br>
                    </div>
                    <?php
                }
            ?>
        </div>
    </div>
    <?php
        //Falls die Sessionvariable "geradeAusgeloggt" gesetzt ist
        if(isset($_SESSION['geradeAusgeloggt'])) {
            unset($_SESSION['geradeAusgeloggt']);
        }
    ?>
</div>

<script>
    //"Hinzufügen"-Button
    document.querySelector('#hinzufuegenbutton').onclick = function() {
        //Falls ein Film vorhanden ist
        if(document.querySelector('.filmelement') !== null) {
            $('#liste').load('listeneueneintraghinzufuegen.php', {
                hinzufuegenButtonGedrueckt: true
            }); 
        }
    }

    //"Entfernen"-Button
    $(document).on('click', '.entfernenbutton', function() { 
        $('#liste').load('elementauslisteentfernen.php', {
            nummerElement: $(this).val()
        }); 
    });

    //Modal "EAN"
    var eanmodal = document.querySelector("#eanmodal");

    document.querySelector("#eanlink").onclick = function() {
        eanmodal.style.display = "block";
    }

    document.querySelector("#eanmodalschliessen").onclick = function() {
        eanmodal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == eanmodal) {
            eanmodal.style.display = "none";
        }
    }

    //Modal "Hinweis"
    var hinweismodal = document.querySelector("#hinweismodal");

    document.querySelector("#hinweislink").onclick = function() {
        hinweismodal.style.display = "block";
    }

    document.querySelector("#hinweismodalschliessen").onclick = function() {
        hinweismodal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == hinweismodal) {
            hinweismodal.style.display = "none";
        }
    }

    //Modal "Liste löschen"
    var listeloeschenmodal = document.querySelector('#listeloeschenmodal');

    document.querySelector('#listeloeschenbutton').onclick = function() {
        //Falls die Liste Einträge enthält
        if(document.querySelector('.filmelement') !== null) {
            listeloeschenmodal.style.display = 'block';
        }
    }

    listeloeschenmodalschliessen.onclick = function() {
        listeloeschenmodal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == listeloeschenmodal) {
            listeloeschenmodal.style.display = 'none';
        }
    }

    //"Liste löschen"-Button
    document.querySelector('#listeloeschenbestaetigenbutton').onclick = function() {
        $('#liste').load('listeloeschen.php', {
            loeschenButtonGedrueckt: true
        });
        listeloeschenmodal.style.display = 'none';
    }

    //"Cancel"-Button
    document.querySelector('#listeloeschencancelbutton').onclick = function() {
        listeloeschenmodal.style.display = 'none';
    }
</script>

Alles anzeigen

header.php:

PHP

<!-- ---CSS Dateiimport--- -->
<style>
    @import url('index.css');
</style>

<!-- ---jQuery Import--- -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<?php
    //Falls der LOS-Button gedrückt wurde
    if(isset($_GET['losbutton'])) {
        //EAN-Eingabe in Textfeld speichern
        $ean = trim($_GET['textfeld'], ' ');
        //Falls die EAN eine ganzzahlige 13-stellige Zahl ist
        if (strlen($ean) == 13 AND is_numeric($ean) AND !strpos($ean, '.') AND !strpos($ean, 'e')) {
            ?>
            <div id="eanhinweis13stelligmodal" class="modal">
            <?php
        }
        //Falls die EAN nicht 13-stellig ist und/oder keine ganzzahlige Zahl
        else {
            ?>
            <div id="eanhinweis13stelligmodal" class="modal" style="display: block;">
            <?php
        }
        ?>
                <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="eanhinweis13stelligmodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">Die EAN muss eine 13-stellige Zahl sein.</p>
            </div>
        </div>
        <?php
    }
?>
<div id="kopfzeile">
    <div id="eingabe">
        <form id="eanformular" method="GET" action="index.php">
            <input type="text" name="textfeld" id="textfeld" class="eaneingabeelement" value="" placeholder="EAN eingeben..." size="60">
            <button id="losbutton" name="losbutton" class="eaneingabeelement eaneingabebutton" type="submit">Los</button>
        </form>        
    </div>
</div>

<script>
    var eanhinweis13stelligmodal = document.querySelector('#eanhinweis13stelligmodal');

    document.querySelector('#eanhinweis13stelligmodalschliessen').onclick = function() {
        eanhinweis13stelligmodal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == eanhinweis13stelligmodal) {
            eanhinweis13stelligmodal.style.display = 'none';
        }
    }
</script>

Alles anzeigen

Weiteres folgt im 2. Post...

h3llo · 27. September 2021

Hallo,

ich habe eine Seite mit mehreren Buttons. Außerdem soll eine Infobox angezeigt werden, wenn auf einen bestimmten Link geklickt wird. Sowohl für die Buttons als auch für die Infobox habe ich ein Javascript, das am Ende der Seite eingebunden ist. Leider funktionieren nur die Buttons oder die Infobox, je nachdem, welcher Javascript-Code zuerst steht. Hier der Code:

Buttons:

Code

<button id="hinzufuegenbutton" class="button" value="Hinzuf&uuml;gen">Zur Liste hinzufügen</button>

Code

<button id="entfernenbutton" type="button" class="entfernenbutton" value="'.$i.'">Entfernen</button>

Link:

Code

<a href="#" id="eanlink">EAN</a>

Infobox:

Code

        <div id="eanmodal" class="modal">
            <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="eanmodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">Text</p>
            </div>
        </div>

Infobox CSS:

Code

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modalheader {
  height: 50px;
  background-color: RGB(0, 0, 130);
}
.modal_inhalt {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
}
.modaltext {
  padding: 20px;
}
.closemodal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 10px;
}
.closemodal:hover, .closemodal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Alles anzeigen

Javascript:

Code

    //"Hinzufügen"-Button
    document.querySelector('#hinzufuegenbutton').onclick = function() {
        if(document.querySelector('.filmelement') !== null) {
            $('#liste').load('listeneueneintraghinzufuegen.php', {
                hinzufuegenButtonGedrueckt: true
            }); 
        }
    }

    //"Entfernen"-Button
    $(document).on('click', '.entfernenbutton', function() { 
        $('#liste').load('elementauslisteentfernen.php', {
            nummerElement: $(this).val()
        }); 
    });

    //Infobox "EAN"
    var eanmodal = document.querySelector("#eanmodal");

    document.querySelector("#eanlink").onclick = function() {
        eanmodal.style.display = "block";
    }

    document.querySelector("#eanmodalschliessen").onclick = function() {
        eanmodal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == eanmodal) {
            eanmodal.style.display = "none";
        }
    }

Alles anzeigen

Wie bekomme ich Buttons und die Infobox zum Laufen?

h3llo · 27. September 2021

Vielen Dank für eure Hinweise! Habe es jetzt mit GET gemacht!

h3llo · 24. September 2021

Noch eine Frage: Kann ich das Ganze auch mit Javascript machen statt mit einem Formular? Ich möchte, dass folgende Nachricht bei F5 nicht erscheint:

html-seminar.de/woltlab/attachment/3206/

h3llo · 24. September 2021

Das funktioniert. Puh, brauchte wirklich jemanden, der das ganze mal entwirrt. Danke!

h3llo · 24. September 2021

Zitat

Soll die begrüßung immer angezeigt werden und wenn man die Suche benutzt dann nicht mehr ?

Nachdem man die Suche das erste mal benutzt hat, soll die Begrüßung nicht mehr angezeigt werden. Also die Seite mit den Informationen aus der Datenbank soll immer angezeigt werden, nachdem man das erste Mal die Suche benutzt hat.

Zitat

PHP

<?php
session_start();
if(isset($_POST['textfeld'])){// existiert ja nur wenn man suche benutzt hat
     $_SESSION['ausgabe']=htmlspecialchars($_POST['textfeld']);
        echo "Suche wurde benutzt";
}elseif(!isset($_SESSION['ausgabe'])) {
        echo "Begrüssung";
}
if(isset($_SESSION['ausgabe'])){
?>
    <div id="ausgabe_container">
        (Code...)
        <div id="film">
            <?php
                include 'filmaktualisieren.php';
            ?>
        </div>
        (Code...)
    </div>
<?php
}
?>

Alles anzeigen

Ich nehme mal an, du meinst Folgendes:

PHP

<?php
session_start();
if(isset($_POST['textfeld'])){// existiert ja nur wenn man suche benutzt hat
     $_SESSION['ausgabe']=htmlspecialchars($_POST['textfeld']);
        echo "Suche wurde benutzt";
}

if(!isset($_SESSION['ausgabe'])) {
        echo "Begrüssung";
}
else {
?>
    <div id="ausgabe_container">
        (Code...)
        <div id="film">
            <?php
                include 'filmaktualisieren.php';
            ?>
        </div>
        (Code...)
    </div>
<?php
}
?>

Alles anzeigen

Anders macht das für mich erstmal keinen Sinn, aber korrigier mich.

Aber was, wenn die Seite einfach nur aktualisiert wird (z. B. F5)? Dann ist $_POST['textfeld'] nicht gesetzt und es wird fälschlicherweise die Begrüßung statt der Informationen aus der Datenbank angezeigt.

Zitat

Was dann in der filmaktualisiern.php alles gemacht wird , mit dem ganzen Sessions blicke ich gerade nicht durch.

Noch kurz zu filmaktualisieren.php: Wenn der LOS-Button gedrückt wird, werden die der Textfeldeingabe entsprechenden Informationen aus der Datenbank abgerufen und in Sessionvaraiblen gespeichert. (Das geschieht nur, wenn der LOS-Button gedrückt wird.) Anschließend werden, falls vorhanden, die Informationen und falls nicht, eine Nachricht, dass keine Informationen vorhanden sind, ausgegeben. (Wird der LOS-Button nicht gedrückt, ist das das Einzige, was passiert. (z. B. bei F5)).

h3llo · 23. September 2021

Code

bei den LOS Button , würde ich ein POST request zu der index.php senden.

Dann mit PHP den POST auslesen und deine Datenbank abfrage machen.

Ich weiß nicht, ob ich dich richtig verstehe. Wie könnte das codetechnisch aussehen?

Code

Hast du das schon online zum testen ?

Noch nicht. Und dauert auch noch etwas.

Code

Der ganze kram mit den Session speichern würde dann weg fallen.

Das mit der Sessionvariable speichern ist auch dafür gedacht, dass bei Aktualisierung mit z.B. F5 weiterhin die Filminformationen angezeigt werden (und nicht die Begrüßung).

h3llo · 22. September 2021

Hallo,

ich habe auf jeder Seite/Unterseite meiner Seite oben einen Header mit einem Texteingabefeld und einem "Los"-Button.

Code

<input type="text" id="textfeld" class="eaneingabeelement" value="" placeholder="EAN eingeben..." size="60">
<button id="losbutton" class="eaneingabeelement eaneingabebutton"" value="Los">Los</button>

Gibt man in das Texteingabefeld etwas ein und drückt auf den "Los"-Button, soll zur Hauptseite index.php gewechselt, falls die Hauptseite noch nicht angezeigt wird, und sollen zu der Eingabe passende Informationen aus einer Datenbank angezeigt werden.

Dafür habe ich das folgende Javascript geschrieben (eingebunden am Ende der Header-Datei):

Code

                document.querySelector('#losbutton').onclick = function() {
                    var textfeldwert = $('#textfeld').val();
                    $.post('sessionvariablenspeichern.php', { 
                        ausgabe: 'liste'
                    });
                    window.location.pathname = 'index.php';
                    $('#film').load('filmaktualisieren.php', {
                        sessionStartenFilm: true,
                        losButtonGedrueckt: true,
                        textfeldwert: textfeldwert
                    });
                }

Alles anzeigen

Dieses speichert zunächst die Eingabe aus dem Texteingabefeld und führt die Datei sessionvariablenspeichern.php aus, in der die Sessionvariable "ausgabe" gesetzt wird:

PHP

<?php
    session_start();
    if (isset($_POST['ausgabe'])) {
        $_SESSION['ausgabe'] = $_POST['ausgabe'];
    }
?>

Dann wird die Hauptseite index.php geladen (da zuvor die Sessionvariable "ausgabe" gesetzt wurde, wird nicht die Begrüßung, sondern das div ausgabe_container geladen):

PHP

(Code...)
<div id="einundausgabe">
            <?php
                if(!isset($_SESSION['ausgabe'])) {
                    (Ist die Sessionvariable "ausgabe" noch nicht gesetzt, erscheint eine Begrüßung)
                }
                else {
                    ?>
                    <div id="ausgabe_container">
                        (Code...)
                                <div id="film">
                                    <?php
                                        include 'filmaktualisieren.php';
                                    ?>
                                </div>
                        (Code...)
                    </div>
                    <?php
                }
            ?>
        </div>
    (Code...)

Alles anzeigen

Zuletzt werden die Informationen aus der Datenbank, die in filmaktualisieren.php abgefragt werden, in das div "film" der Hauptseite geladen (diese werden "nachgeladen", da beim laden der Hauptseite "losButtonGedrueckt" nicht gesetzt war und die Informationen entsprechend nicht aus der Datenbank abgefragt wurden)):

Code

    if(isset($_POST['sessionStartenFilm'])) {
        session_start();
    }
    if(isset($_POST['losButtonGedrueckt'])) {
        (Daten werden aus der Datenbank abgefragt...)
        //Speichern der Daten in Sessionvariablen
        $_SESSION['ean'] = $row['ean_n'];
        $_SESSION['titel'] = $row['titel_n'];
        $_SESSION['disctyp'] = $row['disctyp_n'];
        $_SESSION['besonderheit'] = $row['besonderheit_n'];
    }
    if(!isset($_SESSION['ean'])) {
        echo '
        <div id="leererfilm_container">
            <p id="leererfilmtext">Geben Sie eine EAN ein und klicken Sie auf "Los", um Filmdaten abzurufen.</p>
        </div>
        ';
    }
    else {
        //Die in den Sessionvariablen gespeicherten Filmdaten werden ausgegeben
        echo '
            <div class="filmelement">
            <p class="textfilmelement">'.$_SESSION['titel'].' ('.$_SESSION['ean'].')</p>
            <p class="textfilmelement">'.$_SESSION['disctyp'];
        if($_SESSION['besonderheit'] != '') {
            echo ', '.$_SESSION['besonderheit'];
        }
        echo '
            </p>
            </div>
        ';
    }

Alles anzeigen

Es klingt alles ein bisschen kompliziert und ich glaube auch, ich habe mich ein bisschen verhaspelt. Folgendes ist das Problem: Bei Klick auf den "Los"-Button werden, sofern das div "ausgabe_container" nicht bereits angezeigt wird, die Informationen aus der Datenbank nicht ausgegeben (sondern das div "leererfilm_container") und wenn das div "ausgabe_container" bereits geladen ist, werden die Informationen aus der Datenbank "des aktuellen Klicks auf den "Los"-Button" beim darauffolgenden Klick auf den "Los"-Button geladen und die Informationen aus der Datenbank des darauffolgenden Klicks beim wiederum darauf folgenden Klick geladen. Wie erhalte ich das gewünschte Verhalten?

P.S.: An alle, die bereits meine vorherigen Posts gelesen haben: Ich habe die Struktur der Seite seit dem deutlich verändert. Die alten Posts sind also zu großen Teilen nicht mehr aktuell.

h3llo · 27. August 2021

Funktioniert alles! Vielen Dank!

Zitat

Das HTML statisch für beide Varianten anlegen und mit einer Klasse "hidden" das andere jeweils verbergen.

Das ist eine gute Idee! Ich überlege es mir, das so anzupassen!

h3llo · 27. August 2021

Verstehe. Ich habe jetzt das Javascript nur in den Header eingebunden. Beim Eventbubbling könnte ich noch Hilfe gebrauchen:

Am Beispiel vom Hinzufügen Button:

Das nächste "Elternelement" ist das div filmbuttons und der Button soll listeneueneintraghinzufuegen.php in das div liste laden. Also müsste der jQuery-Code lauten:

Code

$(document).ready(function() { 
    $('#filmbuttons').on('click', '#hinzufuegenbutton', function() { 
        $('#liste').load('listeneueneintraghinzufuegen.php', {
            buttonGedrueckt: true
        }); 
    });
});

Leider funktioniert der Button so nicht.

h3llo · 27. August 2021

Zitat

Wie kann das funktionieren? Wenn das Javascript im document-ready ausgeführt wird, existiert der Button doch noch gar nicht, weil das HTML erst später geladen wird?

Ich weiß nicht genau, was du meinst.

Ich integriere in jede PHP-Datei, in der Elemente wie Buttons sind, die "von jQuery überwacht" werden, an den Anfang

Code

<!-- ---jQuery Import--- -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- ---Javascript / jQuery--- -->
<script src="main.js"></script>

Den jQuery-Code für alle Elemente habe ich komplett in der Datei main.js.

Ich bin Anfänger, es kann also sein, dass ich einen einfachen Fehler gemacht habe.

h3llo · 27. August 2021

Zitat

Ich denke, es würde das Verständnis erleichtern, wenn Du erklären würdest, was es damit im realen Leben auf sich hat, d. h. was die Einträge in diesen beiden Divs zu bedeuten haben. Es hat ja irgend etwas mit Filmen zu tun.

Zitat

Da du das ja noch nicht Online hast, wäre eine Erklärung, oder Beispiel Seite von wem anders ganz gut.

Im ersten div ist ein Eingabefeld, in das man die EAN eines Films eintragen kann. Bei Klick auf Los werden bestimmte Informationen zu dem Film (Titel, Medium, Besonderheiten) aus der Datenbank abgerufen und (anstelle des Eingabefelds) in das div geladen (durch einen Zurück Button kommt man wieder zurück zum EAN-Eingabefeld und kann so weitere Filme und Informationen abrufen).

Im zweiten div ist zunächst (beim ersten Laden der Seite) eine Begrüßung. Klickt man auf den Los Button aus dem ersten div wird in dem div eine (wenn man nicht eingeloggt ist und bereits zuvor eine Liste erstellt hat, zunächst leere) Liste geladen.

Durch einen Button im ersten div kann man den Film und die Informationen in die Liste seiner Filme laden.

Die Seite dient dazu, eine Liste seiner Filme mit den dazugehörigen Filminformationen zu erstellen.

Zitat

Könnte mir vorstellen, dass es auch einfacher geht und dadurch auch schon einige Probleme von alleine verduften.

Ihr seht, es ist schon ein bisschen kompliziert und man benötigt einige Seiten.

Der jQuery Code ist komplett in einer Datei.

Hier noch Bilder, die das Ganze vielleicht noch veranschaulichen können (Seite hat erst grundlegende Funktionen und ist nur grundlegend gestyled. Der "Löschen" Button am unteren Rand der Bilder verschwindet auf den Bildern etwas hinter der "Bild-Navigation". Am Besten "Originalversion aufrufen"):

EAN-Eingabe und leere Liste:

html-seminar.de/woltlab/attachment/3159/

Filminformationen, die nach der Eingabe der EAN und Klick auf Los angezeigt werden und Liste, der bereits Filme hinzugefügt wurden:

html-seminar.de/woltlab/attachment/3160/

h3llo · 26. August 2021

Hallo,

danke für deine Antwort.

Die Seite online zu stellen wäre im Moment ein enormer Aufwand, deshalb habe ich nochmal etwas Code (zu #1) hinzugefügt. Vielleicht erkennt man daran was?

h3llo · 26. August 2021

Hallo,

ich habe ein div "eingabe_container" und ein div "ausgabe_container":

PHP

        <div id="eingabe_container">
            <?php
                include 'eaneingabe.php';
            ?>
        </div>
        <div id="ausgabe_container">
            <?php
                if(isset($_SESSION['filme'])) {
                    include 'liste.php';
                }
                else {
                    include 'vorgang.php';
                }
            ?>
        </div>

Alles anzeigen

Im ersten div wird eaneingabe.php geladen. Es enthält ein Texteingabefeld und einen Button "Los":

Code

    <div id="eingabe">
        <input type="text" id="textfeld" class="eaneingabeelement" value="" placeholder="EAN eingeben..." size="60">
        <button id="losbutton" class="eaneingabeelement"" value="Los">Los</button>
        <button id="loeschenbutton" class="eaneingabeelement" value="L&ouml;schen">Löschen</button>
    </div>

Bei Klick auf den Button "Los" wird in das erste div film.php und in das zweite div liste.php geladen:

Code

$(document).ready(function() { 
        $('#losbutton').click(function() { 
            $('#eingabe_container').load('film.php', {
                buttonGedrueckt: true,
                textfeldwert: $('#textfeld').val()
            }); 
            $('#ausgabe_container').load('liste.php', {}); 
        }); 
    });

film.php enthält ein div "film" und einen Button "Hinzufügen":

PHP

            <div id="film">
                <?php
                    include 'filmerstellen.php'
                ?>
            </div>
            <div id="filmbuttons">
                <p class="textfilmelement"><button id="hinzufuegenbutton" class="button" value="Hinzuf&uuml;gen">Zur Liste hinzufügen</button></p>
                <p class="textfilmelement"><button id="zurueckzureaneingabebutton" class="button" value="Zur&uuml;ck">Zurück</button>&nbsp; &nbsp; &nbsp;</p>
            </div>

Im div "film" wird filmerstellen.php geladen. Diese verarbeitet die in das Textfeld von eaneingabe.php eingegebenen Informationen, speichert Informationen in Session Variablen

Code

      $_SESSION['ean'] = $row['ean'];
      $_SESSION['titel'] = $row['titel'];
      $_SESSION['disctyp'] = $row['disctyp'];
      $_SESSION['besonderheit'] = $row['besonderheit'];

und gibt diese Informationen dann aus (die Ausgabe geschieht in filmaktualisieren.php):

Code

include 'filmaktualisieren.php';

liste.php enthält ein div "liste" und einen Button "Löschen":

PHP

<div id="liste">
    <?php
        include 'listeaktualisieren.php';
    ?>
</div>
<button id="listeloeschenbutton" class="button" value="Liste l&ouml;schen">Liste löschen</button>

Im div "liste" wird listeaktualisieren.php geladen. Diese listet die Einträge der Session Variable "filme" auf und gibt zu jedem Eintrag einen Button "Entfernen" aus:

Code

                echo '
                    <div class="filmelement">
                        <div class ="datenfilmelement">
                            <p class="textfilmelement">'.$_SESSION["filme"][$i][1].' ('.$_SESSION["filme"][$i][0].')</p>
                            <p class="textfilmelement">'.$_SESSION["filme"][$i][2];
                if($_SESSION['filme'][$i][3] != '') {
                    echo ', '.$_SESSION['filme'][$i][3];
                }
                echo '      </p>
                        </div>
                        <div class ="buttonfilmelement">
                            <p class="textfilmelement"><button id="entfernenbutton" type="button" class="entfernenbutton button" value="'.$i.'">Entfernen</button>&nbsp; &nbsp; &nbsp;</p>
                        </div>
                    </div>
                ';

Alles anzeigen

Durch den Button "Hinzufügen" in film.php kann ein neuer Eintrag der Liste hinzugefügt werden:

Klick-Event, das durch den Button ausgelöst wird:

Code

$(document).ready(function() { 
    $('#hinzufuegenbutton').click(function() { 
        $('#liste').load('listeneueneintraghinzufuegen.php', {
            buttonGedrueckt: true
        });
    }); 
});

listeneueneintraghinzufuegen.php:

PHP

<?php
    session_start();
    if (isset($_POST['buttonGedrueckt'])) {
        if (isset($_SESSION['ean'])) {
                $_SESSION['filme'][] = array($_SESSION['ean'], $_SESSION['titel'], $_SESSION['disctyp'], $_SESSION['besonderheit']);
        }
        include 'listeaktualisieren.php';  
    }
?>

Durch den Button "Löschen" in liste.php können alle Einträge der Liste gelöscht werden:

Klick-Event, das durch den Button ausgelöst wird:

Code

$(document).ready(function() { 
    $('#listeloeschenbutton').click(function() { 
        var loeschenBestaetigt = window.confirm('Möchten Sie die komplette Liste wirklich löschen?');
        if (loeschenBestaetigt == true) {
            $('#liste').load('listeloeschen.php', {
                buttonGedrueckt: true
            }); 
        }
    }); 
});

listeloeschen.php:

PHP

<?php
    session_start();
    if (isset($_POST['buttonGedrueckt'])) {
        $_SESSION['filme'] = array();
        include 'listeaktualisieren.php'; 
    }
?>

Durch den Button "Entfernen" in listeaktualisieren.php können Listeneinträge einzeln gelöscht werden:

Klick-Event, das durch den Button ausgelöst wird:

Code

$(document).ready(function() { 
    $('#liste').on('click', '.entfernenbutton', function() { 
        $('#liste').load('elementauslisteentfernen.php', {
            nummerElement: $(this).val()
        }); 
    });
});

elementauslisteentfernen.php:

PHP

<?php
    session_start();
    if (isset($_POST['nummerElement'])) {
        array_splice($_SESSION['filme'], $_POST['nummerElement'], 1);
        include 'listeaktualisieren.php';
    }
?>

Soweit zum Aufbau und dazu, was die Buttons tun sollten.

Tatsächlich passiert Folgendes bei Klick auf die Buttons:

- Bei Klick auf den Button zum Hinzufügen eines Eintrags werden mehrere gleiche Einträge hinzugefügt. Zusätzlich wächst die Anzahl der bei jedem Klick hinzugefügten Einträge mit der Anzahl der Klicks auf den Button.

- Bei Klick auf den Button zum Löschen aller Einträge wird das Bestätigungsfenster (das vor dem Löschen aufgerufen wird) mehrmals aufgerufen, bevor die Einträge gelöscht werden. Auch hier wächst die Anzahl (hier: Aufrufe des Bestätigungsfensters) bei jedem Klick mit der Anzahl der Klicks auf den Button.

- Bei Klick auf einen der Buttons zum Entfernen des einzelnen Listeneintrags werden der Listeneintrag und alle auf diesen folgenden Listeneinträge gelöscht.

Wie erreiche ich das gewollte Verhalten?

Beiträge von h3llo

Mails mittels mail()-Funktion kommen nicht an

Mails mittels mail()-Funktion kommen nicht an

Infobox

Infobox

Infobox

Infobox

Infobox

Infobox

Suchfeld im Header

Suchfeld im Header

Suchfeld im Header

Suchfeld im Header

Suchfeld im Header

Suchfeld im Header

Klick-Event mehrmals ausgeführt

Klick-Event mehrmals ausgeführt

Klick-Event mehrmals ausgeführt

Klick-Event mehrmals ausgeführt

Klick-Event mehrmals ausgeführt

Klick-Event mehrmals ausgeführt