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):
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) :
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.
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">×</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 übermittelt. Du kannst dich jetzt anmelden !";
?>
<?php
} else {
echo "<p><b>Formular unvolstä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ä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.