Per JavaScript senden (AJAX)

Die Sendungsübertragung per XHR-Request (früher als AJAX bezeichnet), ermöglicht Ihnen den Sendevorgang weiter anzupassen. Damit können Sie die Formularsendung ohne Neuladen der Seite im Hintergrund ausführen und die Anzeige von Meldungen (Erfolg, Fehler) individuell, ohne Weiterleitung zu einer Meldungsseite, gestalten. Weiters können Sie im JavaScript Programmcode beliebige Validierungen zu den Formulareingaben durchführen bevor das Formular übertragen wird.

form.taxi ist für die Übertragung per XHR-Requests vorbereitet. Damit Ihre Sendungen als solche erkannt werden, ist es zwingend erforderlich, dass mit dem Request der Header Accept mit dem Wert application/json mitgesendet wird.

Beispiel eines XHR-Requests

<form action="https://form.taxi/s/FORM_CODE" id="my-form" method="POST">
    Name: <input type="text" name="Name"><br>
    Email: <input type="email" name="Email"><br>
    Nachricht: <textarea name="Message"></textarea><br>
    <input type="submit" value="Send">
</form>

<script type="text/javascript">

  var form = document.getElementById("my-form");
  form.onsubmit = function(event) {
    event.preventDefault();

    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", form.action, true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.onload = function(e) {

      // Response
      try {
        var response = JSON.parse(xhr.response);
      } catch(e) {
        var response = { success: false, error_msg: 'no json request' }
      }

      // Success
      if(xhr.status === 200 && response.success == true) {

        // Redirect to Success-URL
        // ... or display Success-Message
        alert("Success!");
      }

      // Error
      else {

        // Display Error Message
        var msg = response.error;
        if(response.error_msg != '')
          msg = response.error_msg;
        alert("Error: " + msg);
      }
    };

    xhr.send(formData);
  };

</script>