Nachrichtenausgabe via Toastr von einer HTML Form funktioniert nicht

[cardinal]

Mahlzeit Community,

ich versuche gerade die eingegebenen Daten einer HTML Form einer .php Datei zu übergeben, verarbeiten zu lassen und davon dann einen json_encode() von einem Javascript auffangen zu lassen, welches die Erfolgs- bzw. Fehlernachricht generiert. Kompliziert geschrieben, aber eigentlich recht einfach. Das Aufrufen der .php funktioniert und die Daten werden korrekt in die Datenbank geschrieben. Leider kommt dann eine weiße Seite die mir die JSON Nachricht ausgibt:

{"message":"Artikel zum Artikelstamm hinzugefuegt","title":"Erfolg"}

Hier erstmal der Quellcode:

HTML-Form:
Die nötigen .css/.js Dateien sind im Header hinzugefügt.

<div id="divid" class="tab-pane fade in active">
   <div class="container">
      <div class="row">
         <div class="9u skel-cell-important">
            <?php
               require_once('artikel/ausgabeArtikel.php');
            ?>
         </div>
         <div class="3u">
            Artikel hinzufügen / löschen<br /><br />
            <form>
               <input type="text" name="artnr" placeholder="Artikelnummer" /><br />
	       <input type="text" name="artbeschr" placeholder="Artikelbeschreibung" /><br />
	       <input type="text" name="groesse" placeholder="Größe" /><br />
	       <input type="text" name="preis" placeholder="Preis" /><br />
	       <input type="submit" value="Hinzufügen"
	          formaction="artikel/addArtikel.php" formmethod="post"/>
	       <input type="submit" name="delete" value="Löschen"
		  formaction="artikel/delArtikel.php" formmethod="post"/>
	     </form>

             <script src="artikel/message.js"></script>												

          </div>
       </div>
   </div>
</div>

addArtikel.php:

<?php 

require_once ('dbconnect.php');

	$artnr = $_POST["artnr"];
      	$artbeschr = $_POST["artbeschr"];
	$preis = $_POST["preis"];
	$groesse = $_POST["groesse"];

        if(isset($_POST["artnr"], $_POST["artbeschr"], $_POST["preis"])){

	   $sql =" INSERT INTO artikelstamm (artnr, beschreibung, groeße, preis) VALUES ('$artnr', '$artbeschr', '$groesse', '$preis')";

	    $ergebnis = mysqli_query($db_link, $sql)
               or die("Fehler: ".mysqli_error($db_link));

            if(!$ergebnis){

	        $arr = array(
                	'message'    => 'Artikel nicht zum Artikelstamm hinzugefuegt',
                	'title'      => 'Fehler beim Hinzufuegen'
            	);

            	echo json_encode($arr);

	    }else{

    		$arr = array(
        		'message'    => 'Artikel zum Artikelstamm hinzugefuegt',
        		'title'      => 'Erfolg'
    		);

    		echo json_encode($arr);
	    }

}

Javascript:

$('#add').on('submit', function(){
    var that = $(this),
        contents = that.serialize();

    $.ajax({
        url: 'addArtikel.php',
        type: 'POST',
        data: contents,
        dataType: 'JSON',
        success: function(data) {
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-full-width",
                "onclick": null,
                "showDuration": "20000",
                "hideDuration": "20000",
                "timeOut": "20000",
                "extendedTimeOut": "20000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }

            if(data.title == "Erfolg"){
                toastr.success(data.message, data.title);
            }else{
                toastr.error(data.message, data.title);
            }
        }

    });

    return false;

});

Das alles funktioniert und ist schon getestet. Natürlich ist mir klar, dass die Funktion auf einen Submit der Form mit der ID "add" wartet. Füge ich dort aber das Attribut id="add" ein, macht die ganze Form einfach gar nichts mehr, selbst die .php wird nicht ausgeführt.

Ohne ID (wie oben schon gesagt) wird die .php ausgeführt, die Daten eingefügt und die weiße Seite mit der JSON-Nachricht ausgegeben. Ich gehe also davon aus, dass die .js die Nachricht ohne die ID nicht bekommt.

Jemand eine Idee wieso die ganze Form nicht funktioniert, wenn die ID eingefügt ist? Oder direkt eine Lösung parat? Ich wäre sehr dankbar

Gruß,
Lui

 

[Kanibal]

Du hast da eine SQL Injection.

 

[cardinal]

Danke für den Hinweis kümmere mich darum sobald die Ausgabe der Nachricht funktioniert. Momentan alles noch in der Entwicklung, also nicht allzu schlimm

Eine Lösung für mein eigentliches Problem kennst du nicht zufällig?

 

[Kanibal]

Für mich klingt das stark nach einem Javascript-Fehler. Versuch vielleicht mal, dieses zu debuggen. Im Chrome kannst Du dafür Breakpoints setzen, oder Dir mit Console.log(message) Nachrichten ins Entwickler-Tool schreiben lassen. Mehr dazu hier: https://developer.chrome.com/extensions/tut_debugging

 

[cardinal]

Ich habe jetzt sehr viel ausprobiert, aber nichts will funktionieren. Kann mir möglicherweise wer bei dem Javascript Code helfen? Kann ich die JSON Nachricht irgendwie anders abfangen lassen, so dass keine ID gebraucht wird?

EDIT:
Selbst wenn ich die Form in folgendes ändere funktioniert es nicht:

<form action="artikel/addArtikel.php" method="post" id="add">
   <input type="text" name="artnr" placeholder="Artikelnummer" /><br />
   <input type="text" name="artbeschr" placeholder="Artikelbeschreibung" /><br />
   <input type="text" name="groesse" placeholder="Größe" /><br />
   <input type="text" name="preis" placeholder="Preis" /><br />
   <input type="submit" value="Hinzufügen" />
</form>

<script src="artikel/message.js">

Angeblich (so sagt mir mein Browser) findet er die addArtikel.php nicht. Anscheinend wird nicht im übergeordneten Ordner "artikel" gesucht, sondern im Verzeichnis der HTML Datei. Jemand eine Idee, wieso jetzt plötzlich die Datei nicht gefunden wird?

 

[Kanibal]

Pfade sind in HTML zunächst relativ. D.h. wenn deine HTML-Seite artikel/seite.html heißt, und du darin auf artikel/addArtikel.php referenzierst, landest Du in artikel/artikel/addArtikel.php

Nochmal: Bau dir in dein Ajax-Javascript in den success-Handler (oder failure-Handler) Console.log-Aufrufe ein, setz Breakpoints und schau dir dann an, welche Zeile genau fehlschlägt.

Alles andere ist eher Glaskugel-Debugging.

 

[cardinal]

Vielen Dank für die Hilfe, die Ausgabe funktioniert jetzt.
Eine letzte Frage:

Ich möchte die zwei folgenden Buttons unterscheiden und in der PHP einen jeweils anderen Code ausführen lassen.

<form action="form_handler.php" method="post" id="form">	
   <input type="text" name="artnr" placeholder="Artikelnummer" /><br />
   <input type="text" name="artbeschr" placeholder="Artikelbeschreibung" /><br />
   <input type="text" name="groesse" placeholder="Größe" /><br />
   <input type="text" name="preis" placeholder="Preis" /><br />
   <input id="button1" type="submit" name="submit1" value="Hinzufuegen" />
   <input id="button2" type="submit" name="submit2" value="Loeschen" />
</form>

Dazu wollte ich es folgendermaßen in der form_handler.php unterscheiden:

<?php
    if (isset($_POST['submit1'])) {
        // mach etwas
    }
    elseif (isset($_POST['submit2'])) {
        // mach etwas anderes
    }
?>

Anscheinend wird die Variable "$_POST['submit']" nicht übertragen. Hab jetzt viele Seiten zu dem Thema durch und eigentlich sollte es so funktionieren. Zumindest ist das Beispiel so auf mehreren unabhängigen Seiten zu sehen.

Jemand eine Idee wo es hackt?

 

[Kanibal]

Das sollte so klappen. Was passiert denn, wenn Du dir mal $_POST ausgeben lässt? (var_dump($_POST))

 

[cardinal]

Lag am Javascript. Die Funktion .serialize() nimmt die Werte der Buttons nicht mit und versendet diese. Der Code musste da angepasst werden.
Danke für die Hilfe