um Daten im Backend verarbeiten zu können, must Du, wenn Du mit JS arbeitest, ein POST-Request absetzen. Wenn es sich um ein Formular und Du alle Eingabe-Felder im Backend verarbeiten möchtest, ist zunächst einmal kein JS erforderlich. Der ACTION-Tag deines Formulars sollte mit einer Route versehen sein, die Aktivierung eines Sende-Buttons ausgeführt wird.
Wenn Du zusätzliche Daten ins Backend posten möchtest, kann Du im Formalar sogenannte Hidden-Felder anlegen, die nicht angezeigt, aber mit übertragen werden um diese dann im Backend zu verarbeiten.
Ein Beispiel mit jQUERY in Kurzform:
HTML
Code: Alles auswählen
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="hidden" id="postId" name="postId" value="34657"> // dies ist ein hidden field und wird nicht angezeigt
// aber mittels POST an das BACKEND gessendet
<input type="submit" value="Send" />
</form>
Code: Alles auswählen
/* Get from elements values */
var values = $(this).serialize();
$.ajax({
url: "test.prg",
type: "post",
data: values ,
success: function (response) {
// Hier kann ein Meldung für den Response ausgegeben werden
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
// fürs debugging hilfreich
}
});
Code: Alles auswählen
// Variable to hold request
var request;
// Binde das submit event mit dem Formular
$("#foo").submit(function(event){
// Überschreibe das default Prevent des Formulars
event.preventDefault();
// Abbruch noch laufenden Request
if (request) {
request.abort();
}
// speichere das Formular in eine Variable
var $form = $(this);
// selectiere alle Felder aus dem Formular
var $inputs = $form.find("input, select, button, textarea");
// Searialisiere die Formulardaten in JSON-Format
var serializedData = $form.serialize();
// Disable alle Input-Felder für den AJAX-Reqquest.
// Hinweis: wir deaktivieren Elemente NACH der Serialisierung der Formulardaten.
// Deaktivierte Formularelemente werden nicht serialisiert
$inputs.prop("disabled", true);
// Sende den Request zu /test.prg
request = $.ajax({
url: "/test.prg",
type: "post",
data: serializedData
});
// Callback-Handler, der bei Erfolg aufgerufen wird
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Logge Fehler zur Konsole
console.error(
"Folgender Fehler ist aufgetreten: "+
textStatus, errorThrown
);
});
// Callback-Handler, der unabhängig davon aufgerufen wird
// ob die Anfrage fehlgeschlagen oder erfolgreich war
request.always(function () {
// Aktiviere die Input-Felder wieder
$inputs.prop("disabled", false);
});
});