2016-04-25 8 views
0

Ich schreibe einen einfachen Shop in PHP (als Praxis). Ich möchte die Funktionalität hinzufügen, dass ToastR angezeigt wird, wenn ich auf die Senden-Schaltfläche klicke: "Produkt wurde erfolgreich zum Warenkorb hinzugefügt".Zeige toastR mit onclick event for form submit

Ich bin neu in PHP.

Das Problem ist, dass Formular übermittelt (und Seite aktualisiert) und toastR hat keine Chance, angezeigt zu werden. Können Sie eine Lösung für dieses Problem vorschlagen?

Beispielcode:

<form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>"> 
    <div><strong><?php echo $product_array[$key]["name"]; ?></strong></div> 
     <div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div> 
     <div> 
      <input type="text" name="quantity" value="1" size="2"/> 
      <input id="addToCartButton" type="submit" value="Add to cart" class="btnAddAction" onclick="toastr.info('Page Loaded!')"/> 
     </div> 
</form> 

ich hinzufügen alle notwendigen CSS und JS (toastR wird an anderen Orten arbeiten)

+0

Übermitteln Sie das Formular über AJAX, und analysieren Sie die Antwort, um die ToastR-Benachrichtigung anzuzeigen? – circusdei

+0

Könnten Sie bitte die Antwort schreiben, wie kann ich sie über Ajax einreichen? Oder jemand anderes? – Marek

+0

Es würde eine Änderung Ihrer Architektur erfordern. Sie benötigen einen API-Endpunkt, um die "Add to cart" -Informationen an AJAX zu senden. Dies kann in PHP geschrieben werden. Sie benötigen auch den JS, um den Ajax-Aufruf zu machen, und etwas, um die Antwort zu parsen. Hier ist eine allgemeine Anleitung: http://www.sitepoint.com/use-jquerys-ajax-function/ – circusdei

Antwort

0
$("form").submit(function(event) { 
    event.preventDefault(); 
    $this = $(this); 
    $.post($this.attr("action"), function(data) { 
     //manage data returned 
     toastr.info('Page Loaded!'); 
    }); 
}); 

Dies ist ein Beispiel von Sende Post Ajax-Aufruf mit jQuery. Dann verwalten Sie Ihre Post-Anfrage in PHP-Zieldatei. Um die Art der Post-Methode zu vervollständigen, wird here you have some examples Ihre Toastr-Funktion nach der Reload-Seite aufgerufen.