How to submit a form using AJAX

For this example we're going to use jQuery. So make sure you've loaded that on your page.

Let's go ahead and look at the form we'll be using. This is your own HTML - and the only thing you need to do to make use of Formbackend. Is to create an account with us, create a new form and use that unique form URL as the value of the action parameter of your form (abcd1234 is the unique identifier for your form - so use whatever you have): 

<form action="https://www.formbackend.com/f/acd123" method="post" id="form-signup">
  <label>Name</label>
  <input type="text" name="name">

  <label>Email</label>
  <input type="text" name="email">

  <button type="submit">Submit</button>
</form>

(make sure you change "abc123" in the above with the unique identifier for your specific form)

Let's take a look at the javascript:

<script>
$(function() {

  var $form = $('#form-signup');

  $form.on("submit", function(e) {

    var formUrl = $(this).attr('action');

    // We don't want the page to submit and refresh
    e.preventDefault();

    // POST the request to Formbackend (the formUrl value)
    $.ajax({
      url: formUrl,
      type: 'POST',
      headers : {
        'accept' : 'application/javascript',
      },
      // We serialize the form fields
      data: $form.serialize()
    }).done(function(submissionMessage) {
      // Happens when success!
      // submissionMessage is the "Submission Text" you set in 
      // Formbackend - default: "We received your submission"
    }).fail(function() {
      // Happens when something goes wrong
    }).always(function() {
      // This always happens
    });

  });

});
</script>

If you add the above javascript inside of a script tag on your website - and the form is similar to what we have in the above example. Then things should just work.

I assume you know the basic of jQuery, but will walk you quickly through it just in case.

First we make sure that the page is in a state where it's ready to be manipulated with the $(function() {.. line.

We then target our form by using the unique id attribute of the form and assign it to the $form variable. We get the URL of the form by taking the value of the actionattribute and assigning that to the formUrl variable.

We then initiate an ajax POST request with the serialized form data and the correct accept header - the accept header pretty much just specifies that we don't want the full HTML response back, but instead we'll just get the successful submission message of the form in the response.

The final HTML looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formbackend Test</title>
  </head>
  <body>

    <form action="https://www.formbackend.com/f/kcsfk4qr" method="post" id="form-signup">
      <label>Name</label>
      <input type="text" name="name">

      <label>Email</label>
      <input type="text" name="email">

      <button type="submit">Submit</button>
    </form>


    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <script>
      $(function() {

        var $form = $('#form-signup');

        $form.on("submit", function(e) {
          var formUrl = $(this).attr('action');
  
          // We don't want the page to submit and refresh
          e.preventDefault();
  
          // POST the request to Formbackend (the formUrl value)
          $.ajax({
            url: formUrl,
            type: 'POST',
            headers : {
              'accept' : 'application/javascript',
            },
            // We serialize the form fields
            data: $form.serialize()
          }).done(function(submissionMessage) {
            // Happens when success!
            // submissionMessage is the "Submission Text" you set in 
            // Formbackend - default: "We received your submission"
          }).fail(function() {
            // Happens when something goes wrong
          }).always(function() {
            // This always happens
          });
        });
      });
    </script>
  </body>
</html>
PreviousRedirect to page after submissionNextHow to show your own message when a form has been submitted

Last updated