PHP Formular mit Ajax bei One seit page

C

Coder Bear

Grünschnabel
Hallo bräuchte mal etwas Hilfe bei einem PHP-Formular ohne Seiten neu laden.

Zu der Seite sie ist auf PHP-Basis, Inhalte der Seite werden über eine JavaScript Funktion nachgeladen. Ich will Formulare einbinden für die Eingabe von daten für eine Datenbank das ohne neu laden der Seite erfordert.
Navigation
HTML: 
<div id="navi_gross">
    <ul class="navi_gross_1">
        <li><a href="#" onclick="inhalt(1)">Start</a></li>
    </ul>
</div>

Inhalt
HTML: 
<div id="Content" style="background-image: url('img/Zeichenfläche3.png');">
    <div id="schrift_1" class="schrift_gross">
        <img src="img/schriftgrosse/Schriftgroesse.jpg" class="schrift_gross">
    </div>
    <div id="schrift_2" class="schrift_normal">
        <img src="img/schriftgrosse/Schriftgroesse.jpg" class="schrift_normal">
    </div>
    <div id="schrift_3" class="schrift_klein">
        <img src="img/schriftgrosse/Schriftgroesse.jpg" class="schrift_klein">
    </div>
    <div class="kasten">
        <div id=""></div>
        <div class="haupt_text">
            <noscript>
                <p class="center">
                    <strong><strong>Bitte aktiviere Sie Javascript um diese Seite zu nutzen </strong></strong>
                </p>
            </noscript>
            <h1 class="center" style="color: #000;">
                Herzlich Willkommen auf der Website<br>
                "Test"
            </h1>
            <br>
            <br>
            <p>&nbsp;</p>
            <h2>
                Test.<br>
                Test.<br>
            </h2>
            <br>
            <br>
            <br>
            <div>
                <p class="block"></p>
                <br>
                <span class="gross_text">
                    <br>
                    <br>
                    <p>
                        Test text
                    </p>

            </div>
            <p>&nbsp;</p>
            <br>
        </div>
    </div>
</div>
Formula von nach werner-zenk.de

PHP: 
<?php
// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST"):

    // Dieses Array speichert die Fehleingaben
    $Fehler = ["name"=>"", "keyWort"=>""];

    // Fehleingaben überprüfen
    if( $_POST["name"] != "Admin"){
        $Fehler["name"] = 'Der Name ist leider falsch!' ;
        $Fehler["keyWort"] = 'Der key ist leider falsch!' ;
    }

    if($_POST["keyWort"] != "test"){
        $Fehler["name"] = 'Der Name ist leider falsch!' ;
        $Fehler["keyWort"] = 'Der key ist leider falsch!' ;
    }

    // Sind Fehleingaben vorhanden?
    if (strlen(implode($Fehler)) > 0):
        // Ja
        // Rückgabe an JavaScript
        // Das Array mit: json_encode() serialisieren
        echo json_encode($Fehler);
    else:
        // Nein
        // Rückgabe an JavaScript
        echo 'OK';

        // Die Daten nun als E-Mail senden, in einer
        // Datei oder Datenbank speichern.
    endif;

    exit; // Wichtig, ansonsten wird der HTML-Körper gesendet!
endif;
?>

CSS: 
<style>
body {
    font-family: Arial, Sans-Serif;
    background-color: Whitesmoke;
}

var {
    color: Red;
}
</style>

HTML: 
<form>
    <legend>
        <h4>Anmeldung</h4>
    </legend>
    <p>
        <label>Name: <var>*</var><br>
        <input type="text" name="name"></label>
    </p>
    <p>
        <label>Passwort: <var>*</var><br>
        <input type="text" name="keyWort"></label>
    </p>
    <p>
        <input type="button" name="senden" value="Anmelden">
    </p>
</form>

Javascript: 
// Das XMLHttpRequest-Objekt setzen
var xhr = new XMLHttpRequest();

// Diese Funktion beim laden der Seite starten
window.addEventListener("load", function() {

    // Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen,
    // dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
    document.getElementsByName("senden")[0].addEventListener("click", eintragen);
});

function eintragen() {
    // Die Formulardaten holen
    var daten = new FormData(document.getElementsByTagName("form")[0]);

    // Die aktuelle Datei über dem HTTP-Stream öffnen
    xhr.open("POST", document.URL, true);

    // Die Formulardaten senden
    xhr.send(daten);

    // Auf eine Antwort warten
    xhr.onreadystatechange = function() {

        // Daten werden (vom PHP-Script) empfangen
        if (xhr.readyState == 4 &&
            xhr.status == 200) {

            // Den Inhalt von 'responseText' überprüfen
            if (xhr.responseText == "OK") {

                // Eine Meldung ausgeben
                document.getElementsByTagName("form")[0].innerHTML = 'Die Daten wurden gesendet.';

            } else {

                // Die Daten in einzelne Objekte zerlegen
                var objekt = JSON.parse(xhr.responseText);

                // Die HTML-Elemente (var) mit den Daten befüllen
                document.getElementsByTagName("var")[0].innerHTML = objekt.name;
                document.getElementsByTagName("var")[1].innerHTML = objekt.keyWort;
                //document.getElementsByTagName("var")[2].innerHTML = objekt.txt;
            }
        }
    }
}

Das Formular funktioniert lässt sich nur nicht in meine Seite einbinden.
Beziehungsweise es werden die eingegeben Daten nicht übergeben.

Danke für die Hilfe
 
Zuletzt bearbeitet von einem Moderator:
Hi,
als erstes validiere Deinen Code mal auf Fehler. Im HTMl fehlt min. ein schließendes span und im Noscript sind doppelte strongs drinnen sowie im CSS steht ein var als Selektor drinnen. Da fehlt entweder ein Punkt für eine Klasse oder was anderes.

Im Javascript, wenn Du ES6 schreib verwende als variable let oder const.
Var kann zwar Sinn machen aber mit den beide nanderen biste erstmal auf der sicheren Seite was Doppeldeklarationen betrifft und damit zusammenhängende falsch zurückgegebene Werte.

Was ich persönlich nicht so toll finde ist wenn man deutsche Variabelnamen verwendet. In der Programmierung ist alles englisch.
Folgendes kann ich jetzt nicht wirklich beurteilen weil dazu zuviel HTML fehlt. Aber HTML5 hate einige neue Elemente wie main, footer etc. dazubekommen unter anderem auch button. Welcher den input-Button ersetzen soll weil dieser semantisch immer in der Kritik stand oder wenn man ein Element hat welches Javascript ausführt.

Im PHP Block solltest Du das exit; rausnehmen und durch ein return: false;
ersetzen. Mit exit; wird dein ganzes Script danach gekillt so wie mit einer Schere. Aber wenn Du das mit der Rückgabe richtig machst sollte das eigentlich nicht von Nöten sein und nur das JSON zurückgeben werden ohne HTML.

Ich denke der Fehler liegt darin das Du keine PHP-Datei angegeben hast welche die Daten verarbeiten sollen.
xhr.open("POST", 'data.php', true);

Ansonsten gibt es inzwischen auch die Fetch API (Using Fetch) die ist aber noch etwas mit Vorsicht zu genießen.

Viele Grüße
 
Zuletzt bearbeitet:
Danke für deine Antwort Jan-Frederik Stieler,

Hat habe die Punkte leider mit der PHP Verarbeitungsdatei und der return: false; die du meintest umgeändert aber es funktioniert leider immer noch nicht. Poste den gesamten abgeänderten Code. Da ich bei der Fetch API nich so ganz duch blicke.
Index.html
HTML: 
<!DOCTYPE HTML>
<html lang="de-DE">
<head>
    <meta charset="UTF-8">
    <title>Formular Test</title>
    <script type="text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
</head>
<body style="background-color:#ff4000;">
<div id="Heat" ></div>
            <div >
                <ul>
                    <li><a href="#" onclick="contPage(1)">Formular</a></li>
                </ul>
            </div>

    <div id="Content")>
        <div class="box">
           
        <div id=""></div>
        <div class="haupt_text">
        <h1 class="center" style="color: #000;">
            Herzlich Willkommen auf der Website<br>
            "test"
        </h1>
        <br>
        <br>
        </div>
      </div>
    </div>
</div>
<script type="text/javascript" >
        function contPage(Page){
            x=Page;
            switch(x){
                case 1:
                    $(".box").load("Ajaxtest.php");
                    break;
                default:
                    $(".box").load("index.html");
                    break;
            }
       
        }
</script>
</body>
</html>
Ajaxtest.php
PHP: 
  <style>
  body {
   font-family: Arial, Sans-Serif;
   background-color: Whitesmoke;
  }

  var {
   color: Red;
  }
  </style>

  <script>
  // Das XMLHttpRequest-Objekt setzen
  const xhr = new XMLHttpRequest();

  // Diese Funktion beim laden der Seite starten
  window.addEventListener("load", function() {

   // Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen,
   // dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
   document.getElementsByName("senden")[0].addEventListener("click", eintragen);
  });

  function eintragen() {
   // Die Formulardaten holen
   const daten = new FormData(document.getElementsByTagName("form")[0]);

   // Die aktuelle Datei über dem HTTP-Stream öffnen
   xhr.open("POST", 'data.php', true);

   // Die Formulardaten senden
   xhr.send(daten);

   // Auf eine Antwort warten
   xhr.onreadystatechange = function() {

    // Daten werden (vom PHP-Script) empfangen
    if (xhr.readyState == 4 &&
        xhr.status == 200) {

     // Den Inhalt von 'responseText' überprüfen
     if (xhr.responseText == "OK") {

      // Eine Meldung ausgeben
      document.getElementsByTagName("form")[0].innerHTML = 'Die Daten wurden gesendet.';
     }
     else {

      // Die Daten in einzelne Objekte zerlegen
      const objekt = JSON.parse(xhr.responseText);

      // Die HTML-Elemente (var) mit den Daten befüllen
      document.getElementsByTagName("var")[0].innerHTML = objekt.name;
      document.getElementsByTagName("var")[1].innerHTML = objekt.keyWort;
     }
    }
   }
  }
  </script>
<form>
                <legend>
                    <h4>Anmeldung</h4>
                </legend>
                 <p>
                  <label>Name: <var>*</var><br>
                  <input type="text" name="name"></label>
                 </p>
                 <p>
                  <label>Passwort: <var>*</var><br>
                  <input type="text" name="keyWort"></label>
                 </p>

             <p>
              <input type="button" name="senden" value="Anmelden">
             </p>
data.php
PHP: 
<?php
// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST"):

// Dieses Array speichert die Fehleingaben
$Wrong = ["name"=>"", "keyWort"=>""];

// Fehleingaben überprüfen
if( $_POST["name"] != "Admin"){
    $Wrong["name"] =  'Der Name ist leider falsch!' ;
    $Wrong["keyWort"] = 'Der key ist leider falsch!' ;
}
if($_POST["keyWort"] != "test"){
    $Wrong["name"] =  'Der Name ist leider falsch!'  ;
    $Wrong["keyWort"] =  'Der key ist leider falsch!' ;
}
 // Sind Fehleingaben vorhanden?
 if (strlen(implode($Wrong)) > 0):

  // Ja
  // Rückgabe an JavaScript
  // Das Array mit: json_encode() serialisieren
  echo json_encode($Wrong);
 else:

  // Nein
  // Rückgabe an JavaScript
  echo 'OK';
  // Die Daten nun als E-Mail senden, in einer
  // Datei oder Datenbank speichern.
 endif;

 return: false; // Wichtig, ansonsten wird der HTML-Körper gesendet!
endif;
?>
Danke
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück