• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kompliziertes Problem mit Formular

lokoroko

Mitglied
Hallo,

also ich habe hier gerade mit einem durchaus kompliziertem Problem zu tun. Auf meiner Website befindet sich ein voll funktionsfähiges Formular-Script mit dem sich neue Nutzer anmelden können. Aus Design-Aspekten habe ich das ganze Script in eine Lightbox getan. Jeder von euch weiß denke ich das beim Umgang mit Lightboxen ein Reload der Website nicht gerade von Vorteil ist. Nun ja und genau hier liegt eben mein Problem. Natürlich war meine erste Idee direkt der Einsatz von Ajax doch das ganze ist in diesem Fall schwerer als gedacht. Ich versuche das ganze jetzt mal Schritt für Schritt zu beschreiben:

Auf meiner Startseite findet sich ein Button mit der Inschrift "Hier Registrieren". Klickt man auf diesen Button öffnet sich auch schon die Lightbox und das Formular erscheint. Soweit so gut und dazu hier der Code (Seite.php):

Code:
<html>

<link rel="stylesheet" href="Seite.css" type="text/css" />

    
<body>
<h4 class="regtext" id='myBtn' style=" font-weight: normal; cursor: pointer">Hier Registrieren </h4>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
<span class="close">&times;</span>
  <div class="modal-content">
<?php include("Probe.php"); ?>
      
  </div>

</div>   

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script> 
    
</body>
</html>


Das Formular (Probe.php) wird über include in die Lightbox eingebunden. Das ganze funktioniert ausgesprochen gut. Doch ab jetzt wird's in meinen Augen kompliziert. Nachdem der User seine Daten in das Formular eingegeben hat werden diese an die Datenbank übermittelt und es kommt zu einem Seiten-Reload. An sich würde sich hier der Einsatz von Ajax anbieten nur irgendwie frage ich mich an welcher Stelle. Aber hier erstmal der Code den ich aufs wesentliche gekürzt habe. (Probe.php) :

Code:
<!DOCTYPE html>
<html>
<head>
<title>Registrierung</title>
    

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    
</head>
<body>

        
<?php
$Benutzername = (isset($_POST["Benutzername"]) && is_string($_POST["Benutzername"])) ?
$_POST["Benutzername"] : "";
$Geschlecht = (isset($_POST["Geschlecht"]) && is_string($_POST["Geschlecht"])) ?
$_POST["Geschlecht"] : "";   
$Vorname = (isset($_POST["Vorname"]) && is_string($_POST["Vorname"])) ?   
$_POST["Vorname"] : "";   
$Nachname = (isset($_POST["Nachname"]) && is_string($_POST["Nachname"])) ?   
$_POST["Nachname"] : "";
$Email = (isset($_POST["Email"]) && is_string($_POST["Email"])) ?   
$_POST["Email"] : "";
$Passwort = (isset($_POST["Passwort"]) && is_string($_POST["Passwort"])) ?   
$_POST["Passwort"] : "";
$Geburtstag = (isset($_POST["Geburtstag"]) && is_string($_POST["Geburtstag"])) ?
$_POST["Geburtstag"] : "";
$Geburtsmonat = (isset($_POST["Geburtsmonat"]) && is_string($_POST["Geburtsmonat"])) ?
$_POST["Geburtsmonat"] : "";
$Geburtsjahr = (isset($_POST["Geburtsjahr"]) && is_string($_POST["Geburtsjahr"])) ?
$_POST["Geburtsjahr"] : "";
$AGB = (isset($_POST["AGB"]) && is_string($_POST["AGB"])) ?
$_POST["AGB"] : "";
$Pfad = (isset($_POST["Pfad"]) && is_string($_POST["Pfad"])) ?
$_POST["Pfad"] : "";
    
    
$ok = false;
$fehlerfelder = array();
if (isset($_POST["Submit"])) {
    $ok = true;
    if (($_POST["Benutzername"] == $ergebnis["benutzername"]) ||
    !is_string($_POST["Benutzername"])) {
    $ok = false;
    $fehlerfelder[] = "Benutzername fehlt oder ist bereits vergeben";
    }
    if (!isset($_POST["Geschlecht"]) ||
    !is_string($_POST["Geschlecht"])) {
    $ok = false;
    $fehlerfelder[] = "Geschlecht";
    }
    if (!isset($_POST["Vorname"]) ||
    !is_string($_POST["Vorname"]) ||
    trim($_POST["Vorname"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "Vorname";
    }
    if (!isset($_POST["Nachname"]) ||
    !is_string($_POST["Nachname"]) ||
    trim($_POST["Nachname"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "Nachname";
    }
    if (!isset($_POST["Email"]) ||
    !is_string($_POST["Email"]) ||
    trim($_POST["Email"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "E-Mail";
    }
    if (!isset($_POST["Passwort"]) ||
    !is_string($_POST["Passwort"]) ||
    trim($_POST["Passwort"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "Passwort";
    }
    if (!isset($_POST["Geburtstag"]) ||
    !is_string($_POST["Geburtstag"]) ||
    $_POST["Geburtstag"] == "0"){
    $ok = false;
    $fehlerfelder[] = "Geburtstag";
    }
    if (!isset($_POST["Geburtsmonat"]) ||
    !is_string($_POST["Geburtsmonat"]) ||
    $_POST["Geburtsmonat"] == "0"){
    $ok = false;
    $fehlerfelder[] = "Geburtsmonat";
    }
    if (!isset($_POST["Geburtsjahr"]) ||
    !is_string($_POST["Geburtsjahr"]) ||
    $_POST["Geburtsjahr"] == "0"){
    $ok = false;
    $fehlerfelder[] = "Geburtsjahr";
    }
    if (!isset($_POST["AGB"]) ||
    !is_string($_POST["AGB"])) {
    $ok = false;
    $fehlerfelder[] = "AGB";
    }
    if ($ok) {
?>   
    
<h1>Formulardaten</h1>
<?php
      
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
$statement = $pdo->prepare("INSERT INTO adressen (id, benutzername, geschlecht, vorname, nachname, email, passwort, geburtstag, geburtsmonat, geburtsjahr, agb, biografie, profilbild, created_at, updated_at) VALUES (NULL,  '$Benutzername', '$Geschlecht', '$Vorname', '$Nachname', '$Email', '$Passwort', '$Geburtstag', '$Geburtsmonat', '$Geburtsjahr', '$AGB', '$Biografie', '$Profilbild', CURRENT_TIMESTAMP, NULL)");
$statement->execute();   //Profilbild nicht entgültig

        
$Benutzername = htmlspecialchars($Benutzername);   
$Geschlecht = htmlspecialchars($Geschlecht);   
$Vorname = htmlspecialchars($Vorname);               
$Nachname = htmlspecialchars($Nachname);   
$Email = htmlspecialchars($Email);   
$Passwort = htmlspecialchars($Passwort);
$Geburtstag = htmlspecialchars($Geburtstag);
$Geburtsmonat = htmlspecialchars($Geburtsmonat);
$Geburtsjahr = htmlspecialchars($Geburtsjahr);
$AGB = htmlspecialchars($AGB);       
echo "<b> Benutzername:</b> $Benutzername<br />";   
echo "<b> Geschlecht:</b> $Geschlecht<br />";   
echo "<b> Vorname:</b> $Vorname<br />";
echo "<b> Nachname:</b> $Nachname<br />";
echo "<b> Email:</b> $Email<br />";
echo "<b> Passwort:</b> $Passwort<br />";
echo "<b> Geburtstag:</b> $Geburtstag<br />";
echo "<b> Geburtsmonat:</b> $Geburtsmonat<br />";
echo "<b> Geburtsjahr:</b> $Geburtsjahr<br />";
echo "<b>AGB:</b> $AGB<br />";     
echo "<br/>";
echo "Super! Alle Daten wurden erfolgreich &uumlbermittelt. Du kannst dich jetzt anmelden !";
?>

<?php
        
  } else {
    echo "<p><b>Formular unvolst&auml;ndig</b></p>";
    echo "<ul><li>";
    echo implode("</li><li>", $fehlerfelder);
    echo "</li></ul>";
  }
}
if (!$ok) {
?>
<fieldset>
<legend>Registrierung</legend>
<form method="post">
<input class="extra" type="radio" name="Geschlecht" value="Hr."<?php

if ($Geschlecht =="Hr.") {
   echo "checked=\"checked\" ";
}     
      
?>/>M&auml;nnlich
<input class="extra" type="radio" name="Geschlecht" value="Fr."<?php   

if ($Geschlecht =="Fr.") {
   echo "checked=\"checked\" ";
}     
      
?>/>Weiblich<br />
    
<label for="bname"> Benutzername:</label> <input maxlength="9" type="text" name="Benutzername" value="<?php   

echo htmlspecialchars($Benutzername);
    
?>" /><br />
    
<label for="vname"> Vorname:</label> <input type="text" name="Vorname" value="<?php   

echo htmlspecialchars($Vorname);
    
?>" /><br />
    
<label for="name"> Nachname:</label> <input type="text" name="Nachname" value="<?php

echo htmlspecialchars($Nachname);
    
?>" /><br /> 
    
<label for="email"> E-Mail-Adresse:</label> <input type="text" name="Email" value="<?php

echo htmlspecialchars($Email);
    
?>" /><br />     
<label for="pw"> Passwort:</label> <input type="password" name="Passwort" value="<?php

    
echo htmlspecialchars($Passwort);
        
?>" /><br />
Geburtstag
<select name="Geburtstag">
<option value="0"> Tag</option>   
<option value="1"<?php   

if ($Geburtstag == "1") {
  echo " selected=\"selected\"";
}
    
?>>1</option>
</select><br/>
<input class="extra" type="checkbox" name="AGB" value="Akzeptiert" <?php

if ($AGB != "") {
  echo "checked=\"checked\" ";
}   
 
?>/>
Ich akzeptiere die AGB.<br/>
<input class="button" type="submit" name="Submit" value="Registrieren"/>
</form>
</fieldset>
<?php
 }
?>   
</body>
</html>

Meine Frage ist ganz einfach, an welcher Stelle würde ihr Ajax einsetzen ? Ich müssten den Code natürlich noch ein wenig auseinander bauen.
 
Werbung:
Letztendlich ist es dieser Part hier der auf Ajax angewiesen ist:

Code:
if ($ok) { 
?>   
    
<h1>Formulardaten</h1>
<?php 
      
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
$statement = $pdo->prepare("INSERT INTO adressen (id, benutzername, geschlecht, vorname, nachname, email, passwort, geburtstag, geburtsmonat, geburtsjahr, agb, biografie, profilbild, created_at, updated_at) VALUES (NULL,  '$Benutzername', '$Geschlecht', '$Vorname', '$Nachname', '$Email', '$Passwort', '$Geburtstag', '$Geburtsmonat', '$Geburtsjahr', '$AGB', '$Biografie', '$Profilbild', CURRENT_TIMESTAMP, NULL)");
$statement->execute();   //Profilbild nicht entgültig

        
$Benutzername = htmlspecialchars($Benutzername);   
$Geschlecht = htmlspecialchars($Geschlecht);   
$Vorname = htmlspecialchars($Vorname);               
$Nachname = htmlspecialchars($Nachname);   
$Email = htmlspecialchars($Email);   
$Passwort = htmlspecialchars($Passwort);
$Geburtstag = htmlspecialchars($Geburtstag);
$Geburtsmonat = htmlspecialchars($Geburtsmonat);
$Geburtsjahr = htmlspecialchars($Geburtsjahr);
$AGB = htmlspecialchars($AGB);       
echo "<b> Benutzername:</b> $Benutzername<br />";   
echo "<b> Geschlecht:</b> $Geschlecht<br />";   
echo "<b> Vorname:</b> $Vorname<br />"; 
echo "<b> Nachname:</b> $Nachname<br />";
echo "<b> Email:</b> $Email<br />";
echo "<b> Passwort:</b> $Passwort<br />";
echo "<b> Geburtstag:</b> $Geburtstag<br />";
echo "<b> Geburtsmonat:</b> $Geburtsmonat<br />";
echo "<b> Geburtsjahr:</b> $Geburtsjahr<br />";
echo "<b>AGB:</b> $AGB<br />";     
echo "<br/>";
echo "Super! Alle Daten wurden erfolgreich &uumlbermittelt. Du kannst dich jetzt anmelden !"; 
?>

<?php
        
  } else { 
    echo "<p><b>Formular unvolst&auml;ndig</b></p>";
    echo "<ul><li>";
    echo implode("</li><li>", $fehlerfelder);
    echo "</li></ul>";
  } 
}

Ich hoffe ihr versteht mein Problem und könnt mir helfen :)
 


Okay also ich glaube das mir das wirklich weiterhilft doch ich glaube mein Hauptproblem liegt darin das ich mir nicht sicher bin, wo genau ich die Ajax-Funktion ausführen lasse. Vielleicht zwischen mein Form-Element ?

BTW: In Seite.php fehlt der Doctype.
Du schreibst, dass Du Probe.php durch include einbindest. Dann sollte diese Datei kein HTML-Grundgerüst enthalten, auch wenn die Browser diesbezüglich tolerant sind.
Okay danke, wieder was dazu gelernt :)
 
Werbung:
Bist Du auch dem Link in der Diskussion bei Stackoverflow gefolgt:
https://jquery-form.github.io/form/
Wenn Du dieses Plugin verwendest, brauchst Du den Ajax-Aufruf nicht mehr selber abzusetzen.

Achso also ich habs mir jetzt mal angeschaut. Ich habe jetzt mal meinem Form-Element genau wie im Beispiel folgendes hinzugefügt:

id="myForm" action="comment.php"

Desweiteren findet sich jetzt auch in meinem head-Bereich folgendes:

Code:
<head>
<title>Registrierung</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>

<script>
     // wait for the DOM to be loaded
     $(function() {
       // bind 'myForm' and provide a simple callback function
       $('#myForm').ajaxForm(function() {
           alert("Thank you for your comment!");
       });
     });
   </script>   

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    
</head>


Doch es funktioniert nicht. Habe ich etwas vergessen ? Außerdem frage ich mich was in der comment.php eigentlich sein soll. Bei mir ist diese Datei aktuell leer...
 
Im wesentlichen das PHP aus deinem Probe.php, ermitteln der POST-Parameter und eintragen in die Datenbank. Wobei der Name "comments.php" für deinen Fall nicht wirklich passt.

Ne schon klar aber ich belasse es erstmal bei dem Namen damit es nicht zu Verwirrung kommt. Ich probiere das ganze mal aus und melde mich dann gleich
 
Also ich habe jetzt den kompletten php Teil in die comment.php Datei geschoben. Nachdem das Formular abgeschickt werde, lande ich also auf der comment.php und die Daten werden eingetragen.

Aber eigentlich will ich ja das sich das ganze geschehen innerhalb der Lightbox abspielt in der auch das Formular drin ist.

Dieser Part hier funktioniert auch nicht:

<script>
// wait for the DOM to be loaded
$(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>

In welcher Datei soll denn diese Meldung : "Thank you for your comment!" Kommen ? Aktuell befindet sich das ganze auf Probe.php aber es kommt zu keiner Meldung da ich durch das Action-Attribut auf comment.php weitergeleitet werde ...
 
Werbung:
Tatsächlich, in der Console findet sich das hier:

TypeError: $('#myForm').ajaxForm is not a function. (In '$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
})', '$('#myForm').ajaxForm' is undefined)

Das bedeutet das dass Plugin nicht richtig eingebunden ist richtig ?
 
Das ganze sieht so aus bzw. wird so eingebunden wie im Beispiel:

Code:
<head>
<title>Registrierung</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>

<script>
     // wait for the DOM to be loaded
     $(function() {
       // bind 'myForm' and provide a simple callback function
       $('#myForm').ajaxForm(function() {
           alert("Thank you for your comment!");
       });
     });
   </script>   
<!--
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
-->   
</head>
<body>
 
Also ich habe das ganze jetzt mal so geändert wie du es gemacht hast. Code (Probe.php) sieht jetzt so aus:

Code:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>

<script>
        // wait for the DOM to be loaded
        $(function () {
            // bind 'myForm' and provide a simple callback function
            $('#myform').ajaxForm(function () {
                alert("Thank you for your comment!");
            });
        });
    </script>   
<!--
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
-->   
</head>
<body>


<fieldset>
<legend>Registrierung</legend>
<form method="post" id="myForm" action="comment.php">
<input class="extra" type="radio" name="Geschlecht" value="Hr."<?php

if ($Geschlecht =="Hr.") {
   echo "checked=\"checked\" ";
}     
      
?>/>M&auml;nnlich
<input class="extra" type="radio" name="Geschlecht" value="Fr."<?php   

if ($Geschlecht =="Fr.") {
   echo "checked=\"checked\" ";
}     
      
?>/>Weiblich<br />
    
<label for="bname"> Benutzername:</label> <input maxlength="9" type="text" name="Benutzername" value="<?php   

echo htmlspecialchars($Benutzername);
    
?>" /><br />
    
<label for="vname"> Vorname:</label> <input type="text" name="Vorname" value="<?php   

echo htmlspecialchars($Vorname);
    
?>" /><br />
    
<label for="name"> Nachname:</label> <input type="text" name="Nachname" value="<?php

echo htmlspecialchars($Nachname);
    
?>" /><br /> 
    
<label for="email"> E-Mail-Adresse:</label> <input type="text" name="Email" value="<?php

echo htmlspecialchars($Email);
    
?>" /><br />     
<label for="pw"> Passwort:</label> <input type="password" name="Passwort" value="<?php

    
echo htmlspecialchars($Passwort);
        
?>" /><br />
Geburtstag
<select name="Geburtstag">
<option value="0"> Tag</option>   
<option value="1"<?php   

if ($Geburtstag == "1") {
  echo " selected=\"selected\"";
}
    
?>>1</option>
</select><br/>
<input class="extra" type="checkbox" name="AGB" value="Akzeptiert" <?php

if ($AGB != "") {
  echo "checked=\"checked\" ";
}   
 
?>/>
Ich akzeptiere die AGB.<br/>
<input class="button" type="submit" name="Submit" value="Registrieren"/>
</form>
</fieldset>   
</body>


Doch es funktioniert nach wie vor nicht. In der Console immer noch die selbe Meldung das ajaxForm nicht definiert ist.

Des Weiteren steht das in der Console:

jQuery.Deferred exception: $('#myform').ajaxForm is not a function. (In '$('#myform').ajaxForm(function () {
alert("Thank you for your comment!");
})', '$('#myform').ajaxForm' is undefined) (2)
(anonyme Funktion) — Test.php:35
j — jquery-3.2.1.min.js:2:30005
(anonyme Funktion) — jquery-3.2.1.min.js:2:30315

Die anonyme Funktion in Zeile 35 ist die hier:
$('#myform').ajaxForm(function () {


Was ist das Problem ?
 
Werbung:
Also ich habe jetzt alles nochmal so gemacht wie du gesagt hattest aber es will nicht funktionieren. In der Console findet sich durchgehend die selbe Meldung von wegen das ajaxForm nicht definiert ist.

Deswegen versuche ich jetzt das Pferd von hinten einzuzäunen.
Warum findet sich in deinem Form-Element kein action="" ?
Um welche Datei handelt es sich bei dir in Posting #14 ?

Nur nochmal zum Verständnis wie das ganze bei mir aufgebaut ist. Die Registrierung und der User-Login befinden sich auf der Startseite, dass bedeutet das alles von Startseite.php ausgeht. Um Verwirrung zu vermeiden habe ich alle Dateinamen bis auf comment.php eindeutig benannt damit klar ist was gemeint ist.

Ich habe also insgesamt vier Dateien:
Startseite.php / Startseite.php bindet Lightbox.php ein über include
Lightbox.php / Lightbox.php bindet Formular.php ein über include
Formular.php / Formular.php hat im Form-Element eine action zu comment.php
comment.php

Ich werde jetzt nochmal zu jeder Datei den relevanten Code posten damit klar ist welche Code wo zu finden ist.

PS: Ich habe bereits versucht alles in eine Datei zu schreiben doch das ändert nichts an dem Problem. die Action wird nach wie vor ausgeführt und ich lande immer auf comment.php.

Startseite.php:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Valence</title>
  <link rel="stylesheet" href="Startslides.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="Startdesign.css" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<?php include("Seite.php"); ?>
  <div id="slides">
    <div class="slides-container">
      
<div id="startpic"><img src="finito2.jpg">
<div id="block1"></div>
<p id="one"> JUST DECIDE.</p>
<div id="anmeldung">
<form method="post">
<input class="login" type="email" name="form_email" maxlength="30" placeholder=" E-MAIL-Adresse" required/> 
<input class="login" type="password" name="form_passwort" maxlength="10" placeholder=" Passwort" required/>
<br>
<input class="button01" type="submit" value="Anmelden">
</form>
<?php
if (isset($ergebnis["passwort"]) && isset($_POST["form_passwort"])) { /* Das darf ja auch nur angezeigt werden, wenn ein Passswort eingetragen wurde */
    echo "E-Mail oder Passwort ist falsch";
}
?>
</div>
<div id="block2"></div>
</div>...

Lightbox.php:

Code:
<html>

<link rel="stylesheet" href="Seite.css" type="text/css" />

    
<body>
<h4 class="regtext" id='myBtn' style=" font-weight: normal; cursor: pointer">Hier Registrieren </h4>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
<span class="close">&times;</span>
  <div class="modal-content">
<?php include("Probe.php"); ?>
      
  </div>

</div>   

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script> 
    
</body>
</html>

Formular.php:

Code:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>

<script>
        // wait for the DOM to be loaded
        $(function () {
            // bind 'myForm' and provide a simple callback function
            $('#myform').ajaxForm(function () {
                alert("Thank you for your comment!");
            });
        });
    </script>   
<!--
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
-->   
</head>
<body>


<fieldset>
<legend>Registrierung</legend>
<form method="post" id="myform" action="comment.php">
<input class="extra" type="radio" name="Geschlecht" value="Hr."<?php

if ($Geschlecht =="Hr.") {
   echo "checked=\"checked\" ";
}     
      
?>/>M&auml;nnlich
<input class="extra" type="checkbox" name="AGB" value="Akzeptiert" <?php

if ($AGB != "") {
  echo "checked=\"checked\" ";
}   
 
?>/>
Ich akzeptiere die AGB.<br/>
<input class="button" type="submit" name="Submit" value="Registrieren"/>
</form>
</fieldset>   
</body>

comment.php:

Code:
<?php
$Benutzername = (isset($_POST["Benutzername"]) && is_string($_POST["Benutzername"])) ?
$_POST["Benutzername"] : "";
$Geschlecht = (isset($_POST["Geschlecht"]) && is_string($_POST["Geschlecht"])) ?
$_POST["Geschlecht"] : "";   
$Vorname = (isset($_POST["Vorname"]) && is_string($_POST["Vorname"])) ?   
$_POST["Vorname"] : "";   
$Nachname = (isset($_POST["Nachname"]) && is_string($_POST["Nachname"])) ?   
$_POST["Nachname"] : "";
$Email = (isset($_POST["Email"]) && is_string($_POST["Email"])) ?   
$_POST["Email"] : "";
$Passwort = (isset($_POST["Passwort"]) && is_string($_POST["Passwort"])) ?   
$_POST["Passwort"] : "";
$Geburtstag = (isset($_POST["Geburtstag"]) && is_string($_POST["Geburtstag"])) ?
$_POST["Geburtstag"] : "";
$Geburtsmonat = (isset($_POST["Geburtsmonat"]) && is_string($_POST["Geburtsmonat"])) ?
$_POST["Geburtsmonat"] : "";
$Geburtsjahr = (isset($_POST["Geburtsjahr"]) && is_string($_POST["Geburtsjahr"])) ?
$_POST["Geburtsjahr"] : "";
$AGB = (isset($_POST["AGB"]) && is_string($_POST["AGB"])) ?
$_POST["AGB"] : "";
$Pfad = (isset($_POST["Pfad"]) && is_string($_POST["Pfad"])) ?
$_POST["Pfad"] : "";
    
    
$ok = false;
$fehlerfelder = array();
if (isset($_POST["Submit"])) {
    $ok = true;
    if (($_POST["Benutzername"] == $ergebnis["benutzername"]) ||
    !is_string($_POST["Benutzername"])) {
    $ok = false;
    $fehlerfelder[] = "Benutzername fehlt oder ist bereits vergeben";
    }
    if (!isset($_POST["Geschlecht"]) ||
    !is_string($_POST["Geschlecht"])) {
    $ok = false;
    $fehlerfelder[] = "Geschlecht";
    }
    if (!isset($_POST["Vorname"]) ||
    !is_string($_POST["Vorname"]) ||
    trim($_POST["Vorname"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "Vorname";
    }
    if (!isset($_POST["Nachname"]) ||
    !is_string($_POST["Nachname"]) ||
    trim($_POST["Nachname"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "Nachname";
    }
    if (!isset($_POST["Email"]) ||
    !is_string($_POST["Email"]) ||
    trim($_POST["Email"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "E-Mail";
    }
    if (!isset($_POST["Passwort"]) ||
    !is_string($_POST["Passwort"]) ||
    trim($_POST["Passwort"]) == ""  ){
    $ok = false;
    $fehlerfelder[] = "Passwort";
    }
    if (!isset($_POST["Geburtstag"]) ||
    !is_string($_POST["Geburtstag"]) ||
    $_POST["Geburtstag"] == "0"){
    $ok = false;
    $fehlerfelder[] = "Geburtstag";
    }
    if (!isset($_POST["Geburtsmonat"]) ||
    !is_string($_POST["Geburtsmonat"]) ||
    $_POST["Geburtsmonat"] == "0"){
    $ok = false;
    $fehlerfelder[] = "Geburtsmonat";
    }
    if (!isset($_POST["Geburtsjahr"]) ||
    !is_string($_POST["Geburtsjahr"]) ||
    $_POST["Geburtsjahr"] == "0"){
    $ok = false;
    $fehlerfelder[] = "Geburtsjahr";
    }
    if (!isset($_POST["AGB"]) ||
    !is_string($_POST["AGB"])) {
    $ok = false;
    $fehlerfelder[] = "AGB";
    }
    if ($ok) {
?>   
    
<h1>Formulardaten</h1>
<?php
    
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
$statement = $pdo->prepare("INSERT INTO adressen (id, benutzername, geschlecht, vorname, nachname, email, passwort, geburtstag, geburtsmonat, geburtsjahr, agb, biografie, profilbild, created_at, updated_at) VALUES (NULL,  '$Benutzername', '$Geschlecht', '$Vorname', '$Nachname', '$Email', '$Passwort', '$Geburtstag', '$Geburtsmonat', '$Geburtsjahr', '$AGB', '$Biografie', '$Profilbild', CURRENT_TIMESTAMP, NULL)");
$statement->execute();   //Profilbild nicht entgültig

        
$Benutzername = htmlspecialchars($Benutzername);   
$Geschlecht = htmlspecialchars($Geschlecht);   
$Vorname = htmlspecialchars($Vorname);               
$Nachname = htmlspecialchars($Nachname);   
$Email = htmlspecialchars($Email);   
$Passwort = htmlspecialchars($Passwort);
$Geburtstag = htmlspecialchars($Geburtstag);
$Geburtsmonat = htmlspecialchars($Geburtsmonat);
$Geburtsjahr = htmlspecialchars($Geburtsjahr);
$AGB = htmlspecialchars($AGB);       
echo "<b> Benutzername:</b> $Benutzername<br />";   
echo "<b> Geschlecht:</b> $Geschlecht<br />";   
echo "<b> Vorname:</b> $Vorname<br />";
echo "<b> Nachname:</b> $Nachname<br />";
echo "<b> Email:</b> $Email<br />";
echo "<b> Passwort:</b> $Passwort<br />";
echo "<b> Geburtstag:</b> $Geburtstag<br />";
echo "<b> Geburtsmonat:</b> $Geburtsmonat<br />";
echo "<b> Geburtsjahr:</b> $Geburtsjahr<br />";
echo "<b>AGB:</b> $AGB<br />";     
echo "<br/>";
echo "Super! Alle Daten wurden erfolgreich &uumlbermittelt. Du kannst dich jetzt anmelden !";
?>

<?php
        
  } else {
    echo "<p><b>Formular unvolst&auml;ndig</b></p>";
    echo "<ul><li>";
    echo implode("</li><li>", $fehlerfelder);
    echo "</li></ul>";
  }
}

?>
 
jQuery.Deferred exception: $('#myform').ajaxForm is not a function. (In '$('#myform').ajaxForm(function () {
alert("Thank you for your comment!");
})', '$('#myform').ajaxForm' is undefined) (2)
(anonyme Funktion) — Test.php:35
j — jquery-3.2.1.min.js:2:30005
(anonyme Funktion) — jquery-3.2.1.min.js:2:30315

Die anonyme Funktion in Zeile 35 ist die hier:
$('#myform').ajaxForm(function () {

Ich weiß nicht ob es relevant ist aber wenn ich auf die Datei jquery-3.2.1.min.js:2:30315 klicke dann werde ich in der Console auf ein paar Zeilen innerhalb dieser Datei verwiesen:

a.console && a.console.warn && b && Q.test(b.name) && a.console.warn("jQuery.Deferred exception: " + b.message, b.stack, c)
}, r.readyException = function(b) {
a.setTimeout(function() {
throw b
})

aber keine Ahnung was mir das sagen soll...
 
Weil ich nur testen wollte, ob das ajaxForm funktioniert. Funktioniert: Der alert() kommt, funktioniert nicht: Die Seite wird neu geladen.

Hast Du die Seite online? Dieses Problem betrifft ja nur Javascript und jQuery und sollte sich im Browser analysieren lassen. Poste die URL.

Also ich habe es gerade hinbekommen. Jetzt läuft nichts mehr über include sondern alles befindet sich auf Startseite.php.

Es lag die ganze Zeit daran das ganz unten auf Startseite.php eine solche Datei eingebunden war:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

nachdem ich diese entfernt habe, funktioniert alles !:)

Doch jetzt besteht ein weiteres Problem und zwar ist mir aufgefallen das immer wenn das Formular abgeschickt wird diese Meldung aufklappt, unabhängig davon ob das Formular jetzt vollständig ist oder nicht. Die Fehlermeldungen die ich in der comment.php eingebaut habe kommen so nicht zum Vorschein.

Gibt es eine Möglichkeit diese dann anstelle von "Thank you for your comment!" anzeigen zu lassen ?
 
Werbung:
Zurück
Oben