Bei klick auf submit button setzt sich jquery funktion wieder zurück

[Conner]

Hey,

ich möchte meine Mitarbeiterverwaltung noch mit Effekten ausstatten. Mein Problem ist es, dass wenn man den submit button klickt wieder alles auf startposition gestellt wird. Dann muss ich wieder die Mitarbeiterverwaltung öffnen sodass ich die fehler sehen kann.

Wie bekommt man es nun hin, dass wenn man auf ein submit button klickt, dass die JQuery-Funktion bleibt und nicht auf standard gestellt wird ?

Seite auf der ihr das Problem sehen könnt : http://conner.bplaced.net/mitarbeiter_verwaltung.php

Conner

[Dormilich]

Mein Problem ist es, dass wenn man den submit button klickt wieder alles auf startposition gestellt wird.

Das ist das Standardverhalten von Formularen.

Stichwort: Affenformular

[Conner]

Ja das weiß ich auch. Nur weiß ich nicht wie ich es hinbekomme, dass wenn man auf ein button klickt, dass die JQuery-Funktion bleibt und nicht auf startposition gestellt wird.

[Dormilich]

Das nennt sich Affenformular. Hat aber nichts mit jQuery zu tun.

[Conner]

Das Formular funktioniert ja. Ich habe ein Button wenn man den klickt rutscht ein div, mit dem formular drin, runter. Momentane Situation: Wenn man nun ein button, bzw submit button klickt wird die jquery funktion auf standard zurückgesetzt, also das div verschwindet und man muss nochmal den button klicken das das div wieder eingeblendet wird und man die fehler oder die erfolgsmessage lesen kann

Nun wie kann man es erreichen, dass die jquery funktion, auch bei klick auf button/submit-button bestehen bleibt und nicht auf start zurückgesetzt wird ?

[Dormilich]

Ohne Code kann man nix dazu sagen. Am besten per Link.

[Conner]

Mein code:

<?php
/*    

input : name="vorname_mitarbeiter"
input : name="nachname_mitarbeiter"
input : name="password_mitarbeiter"
input : name="password_wiederholen"

select : name="aktuelle_mitarbeiter"

submit : name="submit_neuermitarbeiter"
submit : name="mitarbeiter_löschen"

*/

    if(isset($_POST['submit_neuermitarbeiter'])){

        $fehler = array();

        //Eingaben User
        $vorname_mitarbeiter = trim($_POST['vorname_mitarbeiter']);
        $nachname_mitarbeiter = trim($_POST['nachname_mitarbeiter']);
        $password = trim($_POST['password_mitarbeiter']);
        $password_wiederholen = trim($_POST['password_wiederholen']);

        //Eingaben überprüfen
        $vorname_mitarbeiter  = filter_var($vorname_mitarbeiter, FILTER_SANITIZE_STRING);
        $nachname_mitarbeiter = filter_var($nachname_mitarbeiter, FILTER_SANITIZE_STRING);
        $password = filter_var($password, FILTER_SANITIZE_STRING);
        $password_wiederholen = filter_var($password_wiederholen, FILTER_SANITIZE_STRING);    

        //Benutzername festlegen
        $benutzername = $vorname_mitarbeiter . '.' . $nachname_mitarbeiter;

        //Fehlerbehandlung
        if (empty($vorname_mitarbeiter)) {
            $fehler[] = '<p class="fehler"> Vorname fehlt!</p>';
        } else if(is_numeric($vorname_mitarbeiter)){
            $fehler[] = '<p class="fehler">Der Vorname darf nur Buchstaben enthalten!</p>';
        }

        if (empty($nachname_mitarbeiter)) {
            $fehler[] = '<p class="fehler">Nachname fehlt!</p>';
        } else if(is_numeric($nachname_mitarbeiter)){
            $fehler[] = '<p class="fehler">Der Nachname darf nur Buchstaben enthalten!</p>';
        }

        if (empty($password)) {
            $fehler[] = '<p class="fehler">Passwort fehlt!</p>';
        } else if(strlen($password) < 6){
            $fehler[] = '<p class="fehler">Das Passwort muss 6 Zeichen lang sein! </p>';
        }

        if (empty($password_wiederholen)) {
            $fehler[] = '<p class="fehler">Wiederholen sie ihr Passwort!</p>';
        } else if($password_wiederholen !== $password){
            $fehler[] = '<p class="fehler">Das wiederholte Passwort stimmt nicht überein!</p>';
        }
    }

            if(count($fehler) === 0){

                $erfolgreich = '<p class="erfolgreich">Neuer Mitarbeiter wurde angelegt!</p>';
                $erfolgreich_geloescht = '<p class="erfolgreich">Ausgewählter Mitarbeiter wurde erfolgreich gelöscht!</p>';


                try{

                    //Datenbankverbindung
                    $dbv = new PDO ('mysql:host=127.0.0.1;dbname=conner;', 'conner' , '**');

                    //Datenbankabfragen
                    $stmt = $dbv->prepare('INSERT INTO `Mitarbeiter` (vorname, nachname, passwort, benutzername) VALUES (:vorname, :nachname, :passwort, :benutzername)');
                    $result = $stmt->execute(
                        array(
                                ':vorname' => $vorname_mitarbeiter,
                                ':nachname' => $nachname_mitarbeiter,
                                ':passwort' => $password,
                                ':benutzername' => $benutzername
                            )
                        );


                    if(isset($_POST['mitarbeiter_löschen'])){


                        $ausgewaehlter_mitarbeiter = $_POST['aktuelle_mitarbeiter'];
                        //var_dump($ausgewaehlter_mitarbeiter);



                        $stmt2 = $dbv->prepare('DELETE FROM `Mitarbeiter` WHERE `id` = :id');
                        $result2 = $stmt2->execute(
                            array(
                                    ':id' => $ausgewaehlter_mitarbeiter

                                )

                        );

                        }

                    $stmt3 = $dbv->prepare('SELECT id, benutzername FROM Mitarbeiter');
                    $stmt3->execute();

                    $fetchall = $stmt3->fetchAll();






                }catch(PDOException $w){
                    echo 'Ein Fehler ist aufgetreten ' . $w->getMessage();
                    exit;

        }

    }




?>

<!DOCTYPE html>
<html>
<head>
    <title>Mitarbeiterverwaltung</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

            $("#button").click(function(){
                $("#panel").slideDown();
                $('#button').hide();
                $('#zurueck').show();
                $('html').css('background-color', 'rgba' , '(0, 0, 0, 0.2)');


            });

            $('#zurueck').click(function(){
                $("#panel").slideUp();
                $('#button').show();
                $('#zurueck').hide();
                $('html').css('background-color', 'transparent');    

            })



    });

</script>
    <style>


        body{
            margin: 0px;
            padding: 0px;
        }

        p.fehler{
            color:red;
            font-weight: bolder;
        }

        p.erfolgreich{
            color: green;
        }

        div#panel{
            padding: 10px;
            display:none;
            background-color: rgba(0, 0, 0, 0.2);

        }

        #zurueck{
            display: none;
        }


        select{
            width: 10%;
            height: 100px;
        }

        input{
            display: block;    
            margin-bottom: 10px;
            }

        button{
            display: block;
            width: 10%;
            padding: 10px;
            border-top: 2px solid black;
            border-bottom: 2px solid black;
            width: 100%;
            transition: all 2s ease-in;

        }

        input[type="submit"]{
            width: 10%;
            padding: 10px;
            margin-top: 5px;
            border: 2px solid blue;
            transition: all 1s ease-in;
            font-weight: bold;

        }

        input[type="submit"]:hover{
            cursor: pointer;
            background-color: aqua;


        }

        button:hover{
            cursor: pointer;
            background-color: red;


        }


    </style>


<head>
  <meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

        <button id="button">Mitarbeiter verwalten</button>
        <button id="zurueck">Zurück...</button>    

         <div id="panel">

             <form method="post">
                <label> Vorname: <input type="text" name="vorname_mitarbeiter"></label>
                <label> Nachname: <input type="text" name="nachname_mitarbeiter"></label>

                <label> Passwort: <input type="password" name="password_mitarbeiter"></label>
                <label> Passwort wiederholen: <input type="password" name="password_wiederholen"></label>

                <input type="submit" name="submit_neuermitarbeiter" value="Mitarbeiter/in hinzufügen!">



                <h4>Aktuelle Mitarbeiter</h4>


                        <select name="aktuelle_mitarbeiter" multiple>
                            <?php            

                                    foreach($fetchall as $key){
                                    echo '<option value="'.  $key['id']  . '">' . $key['benutzername'] . '</option>';
                                }



                            ?>    
                        </select>

                <input type="submit" name="mitarbeiter_löschen" value="Mitarbeiter/in löschen!">

                    <?php


            if(isset($fehler) && count($fehler) > 0){
                echo '<p class="fehler">Mitarbeiter konnte nicht hinzugefügt werden!</p>';
                echo '<p class="fehler">Folgende Fehler traten auf:</p>';
                echo '<ul>';

                foreach ($fehler as $key  ) {
                    echo '<li>' . $key . '</li>';
                }

                echo '</ul>';

            }  else if(isset($_POST['submit_neuermitarbeiter']) && isset($erfolgreich) && count($fehler) === 0){
                echo $erfolgreich;
            } else if(isset($_POST['mitarbeiter_löschen']) && isset($erfolgreich_geloescht) && !is_null($ausgewaehlter_mitarbeiter) && count($fehler) === 0){
                echo $erfolgreich_geloescht;
            } else if (isset($_POST['mitarbeiter_löschen']) && is_null($ausgewaehlter_mitarbeiter) && count($fehler) === 0){
                echo '<p class="fehler">Es wurde kein Mitarbeiter ausgewählt!</p>';
            }


        ?>    


    </form>


</div>


</body>
</html>

Und Link zur Beispielseite : http://conner.bplaced.net/mitarbeiter_verwaltung.php

[Dormilich]

Wie bekommt man es nun hin, dass wenn man auf ein submit button klickt, dass die JQuery-Funktion bleibt und nicht auf standard gestellt wird ?

Hat nix mit jQuery, sondern mit deinem CSS zu tun. Das sorgt nämlich dafür, dass bei einem Page Load alles eingeklappt ist. jQuery macht nur die auf/zu-Animation, sonst nichts.

[Conner]

Danke für die Info da hast du recht.

Ich muss den div id=panel ja irgendwie ausblenden, sodass das div erst auf klick mitarbeiter verwalten erscheint. Wie soll man es denn machen ?
Denn die funktionen display, visibility fallen ja schon weg. Weil nach Klick auf submit button das div sonst verschwindet.

Noch ein problem wenn ich auf ein submit button klicke wechselt der button sich von Zurück in Mitarbeiter verwalten. Wie kann man dies beheben, sodass erst bei klick auf zurück und nicht bei klick auf submit-buttons sich der button ändert ?

[Dormilich]

Noch ein problem wenn ich auf ein submit button klicke wechselt der button sich von Zurück in Mitarbeiter verwalten.

Tut er nicht. Der 'Mitarbeiter verwalten' Button ist der default nach dem Page Load.

Ich muss den div id=panel ja irgendwie ausblenden, sodass das div erst auf klick mitarbeiter verwalten erscheint.

Das widerspricht aber deiner Aussage, dass bei Fehlern es eben nicht so sein soll.

Wie soll man es denn machen ?

Dann musst du eben mit PHP das passende HTML generieren.

[Conner]

Mein Ziel ist, dass das panel erst erscheint wenn man auf den Mitarbeiter verwalten Button klickt und dieses erst zu geht wenn ich auf den Zurück button klicke, nicht schon wenn ich auf die Buttons "Mitarbeiter/in hinzufügen!" oder "Mitarbeiter/in löschen!" klicke.

[Dormilich]

nicht schon wenn ich auf die Buttons "Mitarbeiter/in hinzufügen!" oder "Mitarbeiter/in löschen!" klicke.

Dann darfst du entweder das Formular nicht absenden, oder musst beim Seitenaufbau entscheiden, ob das Formular angezeigt wird oder nicht.

[Conner]

Eins steht fest, ich muss das Formular ja absenden damit die Daten durch PHP bearbeitet werden können, und das Formular muss dazu angezeigt werden.

Gibt es denn andere Möglichkeiten ?

[Dormilich]

Gibt es denn andere Möglichkeiten ?

PHP erstellt das HTML. Wenn du also statt dem eingeklappten Formular ein ausgeklapptes anzeigen willst, muss das PHP halt den entsprechenden HTML-Code dazu erzeugen. (Das mindeste wäre, display: none nicht hart zu codieren).

[Conner]

Ok alles klar ich versuche es mal.