Formulareingaben mit jQuery übertragen

Ein oft nachgeschlagenes Thema ist die Auswertung von HTML-Formularen mit jQuery. Um zu zeigen, wie bequem Daten eines Formulars mit jQuery empfangen und übermittelt werden können, habe ich ein paar Code-Beispiele vorbereitet.

Einfaches HTML-Formular

Als Beispiel dient ein Formular mit zwei Eingabefeldern und einer Schaltfläche zum Absenden:

<form id="myForm" action="receiver.php">
  <label for="color">Color</label><br/>
  <input id="color" type="text" name="colorName" value="red" />
  <br/>
  <label for="code">Code</label><br/>
  <input id="code" type="text" name="colorCode" value="#FF0000" />
  <br/>
  <input id="mySubmitButton" type="submit" value="Submit" />
</form>

Aufbau eines HTML-Formulars

Das action-Attribut des Formulars gibt an, an welche Datei die Daten gesendet werden sollen. Damit die Formularfelder näher beschrieben werden können, gibt es Bezeichner (engl. labels). Ein Bezeichner referenziert über das for-Attribut jeweils die ID einer Formulareingabe.

Für die Verarbeitung von Formularangaben gibt es ein name-Attribut. Das name-Attribut wird zusammen mit dem value an den Empfänger geschickt.

Klickt man auf den Absenden-Knopf (engl. submit button), dann werden über die HTTP GET-Methode die Daten versendet. In der Adresszeile des Browser sieht das wie folgt aus: receiver.php?colorName=red&colorCode=%23FF0000.

Beim Drücken auf den Absende-Knopf findet folglich eine Weiterleitung (engl. redirect) auf eine neue Seite statt. Alle Daten werden als URL-Parameter übergeben und Sonderzeichen enkodiert. Durch den Anhang der Parameter an die URL, verlängert sich die URI. Damit es keine Konflikte gibt, darf die URI nicht länger als 255 bytes sein.

Weiterleitung verhinden

Wer nicht möchte, dass beim Klick auf die Absenden-Schaltfläche eine Weiterleitung stattfindet, der muss dafür sorgen, dass der Absenden-Knopf den booleschen Wert „false“ zurück gibt. Am einfachsten lässt sich das über jQuery bewerkstelligen:

$('#mySubmitButton').on('click', function(){
  return false;
});

Formulardaten mit jQuery übermitteln

Wird die Weiterleitung beim Klick auf den Absenden-Knopf verhindert, so findet kein Versand der Daten statt. Man muss also selber über jQuery die Daten versenden:

$('#mySubmitButton').on('click', function() {
 
  $.ajax({
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: $('#myForm').serialize(),
    type: 'GET',
    url: 'receiver.php'
  }).done(function(data, textStatus, jqXHR) {
    console.log('Data sent.');
  }).fail(function(jqXHR, textStatus, errorThrown) {
    console.log('There was an error.');
  });
 
  return false;
 
});

Die Funktion serialize sorgt dafür, dass alle Formularfelder (die über ein name-Attribut verfügen) in einer Zeichenkette zusammengefasst werden.

Im Beispiel sieht das so aus: colorName=red&colorCode=%23FF0000.

Kurzschreibweise: $.get

Anstatt des Aufrufs von $.ajax kann auch folgende Kurzschreibweise verwendet werden:

$('#mySubmitButton').on('click', function() {
 
  $.get('receiver.php', $('#myForm').serialize())
  .done(function() {
    console.log('Data sent.');
  })
  .fail(function() {
    console.log('There was an error.');
  });
 
  return false;
 
});

Daten in JSON übermitteln

Möchte man Daten im JSON-Format übertragen, so ist der Einsatz von serialize nicht ausreichend, da bei diesem Funktionsaufruf nur eine Parameter-Zeichenkette entsteht und keine Objekt-Notation. Die Formulareingaben müssen daher vorher in ein JavaScript-Objekt umgewandelt werden:

$('#mySubmitButton').on('click', function() {
 
  var object = {};
  // Put form inputs into an array
  var array = $('#myForm').serializeArray();
  // Make an object out of the array
  $.each(array, function(index, item) {
    object[item.name] = item.value;
  });
 
  $.ajax({
    contentType: 'application/json; charset=UTF-8',
    dataType: 'json',
    data: JSON.stringify(object),
    type: 'POST',
    url: 'receiver.php'
  }).done(function(data, textStatus, jqXHR) {
    console.log('Data sent.');
  }).fail(function(jqXHR, textStatus, errorThrown) {
    console.log('There was an error.');
  });
 
  return false;
 
});

Mit der jQuery-Funktion serializeArray wird zuerst ein Feld aus den Formulareingaben erzeugt. Anschließend wird aus diesem Feld ein JavaScript-Objekt gebildet, welches dann mit der vom Browser zur Verfügung gestellten Funktion JSON.stringify in JSON umgewandelt wird. Für den Versand wurde außerdem der dataType und der contentType des $.ajax-Aufrufs geändert. Weil die JSON viele Sonderzeichen enthält empfiehlt es sich die Methode zum Senden von GET auf POST umzustellen.

Kompletter Quelltext

<!DOCTYPE html >
<html>
  <head>
    <title>Send form inputs with jQuery</title>
    <meta charset="UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  </head>
  <body>
 
    <form id="myForm" action="receiver.php">
 
      <label for="color">Color</label>
 
      <br/>
      <input id="color" type="text" name="colorName" value="red" />
 
      <br/>      
      <label for="code">Code</label>
 
      <br/>
      <input id="code" type="text" name="colorCode" value="#FF0000" />
 
      <br/>      
      <input id="mySubmitButton" type="submit" value="Submit" />
 
    </form>
 
    <script>
      jQuery(document).ready(function($) {
 
        $('#mySubmitButton').on('click', function() {
 
          var object = {};
          // Put form inputs into an array
          var array = $('#myForm').serializeArray();
          // Make an object out of the array
          $.each(array, function(index, item) {
            object[item.name] = item.value;
          });
 
          $.ajax({
            dataType: 'json',
            contentType: 'application/json; charset=UTF-8',
            data: JSON.stringify(object),
            type: 'POST',
            url: 'receiver.php'
          }).done(function(data, textStatus, jqXHR) {
            console.log('Data sent.');
          }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log('There was an error.');
          });
 
          return false;
 
        });
 
      });
    </script>
  </body>
</html>

5 Gedanken zu „Formulareingaben mit jQuery übertragen“

  2. Funktioniert einwandfrei – nur bei der get-variante „$.get(‚receiver.php‘, $(‚#myForm‘).serialize())“ werden radio-buttons bzw. checkboxen in der form beim serialize nicht berücksichtigt. Was mache ich falsch?

  5. Hallo,
    es funktioniert gut 🙂
    Wie kann ein input-field type=“file“ mit ausgelesen werden? hier wird die ausgwählte Datei nicht in das Objekt integriert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.