Ankündigung

Einklappen
Keine Ankündigung bisher.

Formular mit ajax versenden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Formular mit ajax versenden

    Hallo alle zusammen,

    ich bräuchte mal eure Hilfe. Seit geschlagenen 2 Tagen quäle ich mich durch http und finde einfach nicht die passende Lösung.


    Ich habe folgendes Problem:*
    Ich möchte ein Kontaktformular mittels ajax versenden und über php in meine Datenbank einpflegen. Dafür habe ich auch einige Anleitungen im Internet gefunden, aber selbst wenn ich sie 1:1 abschreibe, funktioniert das Ganze bei mir nicht.
    Meiner Meinung nach liegt das an meinem java code, da, wenn ich dass Formular wie üblich über <form action="test.php"> versende, die Daten in die Datenbank übertragen werden.

    Hier sind meine Daten:

    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
    
     <script src="../js/jquery-3.2.1.js"></script>
    
    </head>
    
    <body>
    
    <div class="ud_box">
     <form id="ud_form">
     <input type="text" id="name" name="name" placeholder="Name">
     <input type="text" id="nachname" name="nachname" placeholder="Nachname">
     <input type="submit" name="senden" id="senden" value="Abschicken">
     </form>
    </div>
    
    <div class="ud_box" id="ud_output"></div>
    
    <script>
    
    $(document).ready(function(){
     $("#senden").click(function(){
      var name = $("#name").val();
      var nachname = $("#nachname").val();
      $.ajax({
       type: "post",
       url: "get_ekt.php",
       data: {name:name,nachname:nachname},
       cache: false,
       success: function(value){
    
       }
      });
    
     });
    });
    
    </script>
    
    </body>
    </html>
    PHP-Code:

    <?php

    //Zugangsdaten für die Datenbank
    $servername "localhost";
    $username "root";
    $password "";
    $dbname "modultest";

    //Verbindung herstellen
    $conn mysqli_connect($servername$username$password$dbname);
    if(
    $conn) {
     echo 
    "Alles ok";
    } else {
     exit(
    "Da ging etwas schief!".mysqli_connect_error());


    //Funktion zum INSERT Datenbank
    if(isset($_POST['name']) && isset($_POST['nachname'])) {

     
    //JAVASCRIPT aus dem Code löschen
     
    $name $_POST['name'];
     
    $nachname $_POST['nachname'];


     
    //SQL Statement
     
    $sql_insert 'INSERT INTO test SET
         name = "'
    .$name.'",
         nachname ="'
    .$nachname.'"';


     
    //SQL einfügen
     
    $insert mysqli_query($conn$sql_insert);
    }

    ?>
    Danke schon mal im Voraus!


  • #2
    Hi,

    lass dir in der Funktion bei success mit alert den Parameter value ausgeben. In dem Parameter value werden die Ausgaben vom Zielscript gespeichert.

    So kannst du dir z.B. zum Debuggen Fehlermeldungen ausgeben lassen, falls etwas nicht funktioniert.

    PHP-Code:
    <script>
    $(
    document).ready(function(){
     $(
    "#senden").click(function(){
      var 
    name = $("#name").val();
      var 
    nachname = $("#nachname").val();
      $.
    ajax({
       
    type"post",
       
    url"get_ekt.php",
       
    data: {name:name,nachname:nachname},
       
    cachefalse,
      
    /*
      * Meldung vom Zielscript ausgeben
      */
       
    success: function(value){ alert(value); }
      });
     });
    });
    </script> 
    Script "get_ekt.php":

    PHP-Code:
    //Funktion zum INSERT Datenbank
    if(isset($_POST['name']) && isset($_POST['nachname'])) {

     
    //JAVASCRIPT aus dem Code löschen
     
    $name $_POST['name'];
     
    $nachname $_POST['nachname'];


     
    //SQL Statement
     /*
     * 1. Nicht so, sonst erhalten alle Zeilen der Spalten name, nachname den gleichen Wert
     * 2. Nicht "name" als Spaltenname, könnte zu Konflikten führen, falls dies ein reserviertes Wort ist
     */
     //$sql_insert = 'INSERT INTO test SET name = "'.$name.'", nachname ="'.$nachname.'"';
    /*
    * Statement zum Einfügen
    */
    $sql_insert "insert into test(name, nachname)values('$name', '$nachname')";
     echo 
    json_encode($sql_insert);

    Ausgabe bei mir:

    Code:
    "insert into test(name, nachname)values('Ein_Name', 'Ein_Nachname')"
    Der JavaScript-Code scheint also richtig zu sein.

    Noch ein Tip:

    Textfelder sind immer "gesetzt", egal ob was drin steht oder nicht. if(isset($_POST['Name_des_Textfelds']) . . . alleine bringt also nichts.

    PHP-Code:
    if( strlen(trim($_POST['name'])) == || strlen(trim($_POST['nachname'])) == 0){
     echo 
    json_encode("Sie haben nicht alle Felder ausgefuellt.");
     exit;

    Gruß
    Günni

    Kommentar


    • #3
      Herzlichen Dank Günni!

      Jetzt funktioniert das script perfekt...

      Aber ich müsste dennoch nochmals nachfragen. Obwohl ich die Daten ja per POST verschicke werden sie bei mir in der URL angezeigt. Ich dachte immer dies geschieht lediglich bei GET bzw. bei einer ajax funktion gar nicht, da es ja zu keinem Seitenreload kommt.
      Außerdem sind meine input textfelder nach dem Abschicken leer, auch dies spricht doch dafür, dass mein Browser ungewollt einen Seitenreload durchführt, oder?

      Nachdem das Ganze mit alert funktioniert hat, hab ich nun versucht es mir in die html Seite anzeigen zulassen. Nun speichert er die eingegebenen Daten zwar ab, aber eine Rückmeldung in die html Seite bekomme ich leider nicht.

      HTML-Code:
      <!DOCTYPE html>
      <html>
      <head>
      
          <script src="../js/jquery-3.2.1.js"></script>
      
      </head>
      
      <body>
      
      <div class="ud_box">
       <form id="ud_form">
          <input type="text" id="name" name="name" placeholder="Name">
          <input type="text" id="nachname" name="nachname" placeholder="Nachname">
          <input type="submit" name="senden" id="senden" value="Abschicken">
       </form>
      </div>
      
      <div id="ud_output">TEst</div>
      
      <script>
      
      $(document).ready(function(){
          $("#senden").click(function(){
              var name = $("#name").val();
              var nachname = $("#nachname").val();
              $.ajax({
                  type: "post",
                  url: "get_ekt.php",
                  data: {name:name,nachname:nachname},
                  cache: false,
                  success: function(value){
                      $("#ud_output").html(value);
                                  }
              });
      
          });
      });
      
      </script>
      
      </body>
      </html>

      Kommentar


      • #4
        Hi,

        dass es zu einem Seitenreload kommt, liegt am Submit-Button im Formular.

        Entweder du unterbindest das Defaultverhalten durch event.preventDefault(); (siehe unten "Seitenreload unterbinden"),

        oder du deklarierst einen Button außerhalb des Formulars.

        PHP-Code:
         <form id="ud_form">
         <
        input type="text" id="name" name="name" placeholder="Name">
         <
        input type="text" id="nachname" name="nachname" placeholder="Nachname">
         </
        form>
         <
        button name="senden" id="senden">Abschicken</button
        PHP-Code:
        <script>
        $(
        document).ready(function(){
         $(
        "#senden").click(function(){
          var 
        name = $("#name").val();
          var 
        nachname = $("#nachname").val();
          $.
        ajax({
           
        type"post",
           
        url"get_ekt.php",
           
        data: {name:name,nachname:nachname},
           
        cachefalse,
          
        /*
          * Meldung vom Zielscript ausgeben
          */
           
        success: function(value){ alert(value); }
          });
         
        /*
          * Seitenreload unterbinden
         */
         
        event.preventDefault();
         });
        });
        </script> 
        Was die Ausgabe $("#ud_output").html(value); angeht, da müsstest du schon das Script get_ekt.php posten.


        Gruß
        Günni

        Kommentar


        • #5
          Erneut herzlichen Dank für die schnelle Antwort!! Jetzt wird die Seite nicht mehr aktualisiert und das mit dem Inhalt habe ich dank deinen obigen Formeln auch geschafft! Danke!

          Kommentar


          • #6
            Zitat von Günni Beitrag anzeigen
            Hi,

            lass dir in der Funktion bei success mit alert den Parameter value ausgeben. In dem Parameter value werden die Ausgaben vom Zielscript gespeichert.

            So kannst du dir z.B. zum Debuggen Fehlermeldungen ausgeben lassen, falls etwas nicht funktioniert.
            Debuggen mit alert ?????
            .... console.log(..):

            Kommentar


            • #7
              Zitat von kaminbausatz Beitrag anzeigen

              Debuggen mit alert ?????
              .... console.log(..):
              Hi kaminbausatz,

              jetzt wirst du aber pingelig. Fehlermeldungen, die man im Zielscript mittels echo, var_dump, exception oder wie auch immer ausgibt,

              verschwinden ins Nichts, weil das Zielscript im Hintergrund läuft. Es wird also nicht im Browser dargestellt, ergo kann ich zu dem Script

              auch keine Konsole öffnen.(Es sei denn, du wüsstest eine Möglichkeit)

              Mit Debuggen meinte ich also mehr das, was eigentlich jeder macht . . .

              PHP-Code:
              if(Aktion_mißlungen){
               echo 
              "Upps, da ist was schiefgegangen";

              Diese Meldung wird vom aufrufendem Script entgegen genommen und via alert ausgegeben.

              Es findet also kein Debuggen mit alert ????? statt, sondern lediglich eine Ausgabe.

              Gruß
              Günni

              Kommentar


              • #8
                Fürs Debuggen gibts Debugger.

                Debuggen mit echo ist genauso schlecht wie Debuggen mit alert(). Nur weils "jeder" macht, ist es nicht automatisch gut.

                Es sollte übrigens nicht Fehlerbehandlung mit Debugging verwechselt werden. Wenn Fehler einfach so im Nirgendwo verschwinden, liegt eine unzureichende Fehlerbehandlung vor. Debugging ist etwas, was ein Programmierer temporär macht um eine Fehlerursache zu finden. Eine Fehlerbehandlung sollte aber immer arbeiten, auch im Produktivsystem. Einerseits, um den Benutzer darauf hinzuweisen, dass etwas (momentan) nicht funktioniert. Und andererseits damit solche Fehler im Nachhinein auswertbar sind bzw. in schwerwiegenden Fällen die Betreiber informiert werden.

                Kommentar

                Lädt...
                X