Skip to content

Using AJAX

Collect submission data with the same ease and convenience while taking full control of the front-end experience.

Adapt your form

If you want to add validation logic to your form or don't want to redirect after a submission, then submitting with AJAX is a good option. Basin form endpoints accept standard AJAX requests and work cross-origin by default.

When using AJAX, you only need to set theAccept header toapplication/json if you're using jQuery, which really isn't necessary unless you're worried about backward compatibility of your form for older browsers. In most modern cases, vanilla JS will do.

Basic AJAX example

Paste the example code below anywhere before the</body> tag.

<script type="text/javascript">
var form = document.getElementById("my-contact-form");
var formMessage = document.getElementById("form-message");
form.onsubmit = function(event) {
  event.preventDefault();
  var formData = new FormData(form);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", form.action, true);
  xhr.send(formData);
  xhr.onload = function(e) {
    if (xhr.status === 200) {
      formMessage.innerHTML = "Success";
    } else {
      var response = JSON.parse(xhr.response);
      formMessage.innerHTML = "Error: " + response.error;
    }
  };
};
</script>

Now all you need to do is add the "my-contact-form" ID to your form tag and the "form-message" ID to a div after the button element. As a result, your form should look like the example code below:

<form action="https://usebasin.com/f/1a2b3c4d5e6f" method="POST" id="my-contact-form">
  <label for="email-address">Email Address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
  <div id="form-message"></div>
</form>

And that's it. You're AJAX form should be up and running.

Server status codes

For your reference, below is a list of common status codes you could receive when submitting to Basin form endpoints using AJAX. If you receive a status code not present on this list, please let us know.

Code Status
200 { success: true, given_params: { } }
400 { error: 'Target form endpoint does not exist or is not active due to your account status. Enusure the form uuid is configured correctly and exists.' }
422 { error: 'reCaptcha response must be present' }
422 { error: 'Submission cant be blank' }
500 { error: 'Something went wrong' }

Advanced functions

You can do a lot of things with AJAX. In addition to collecting data from standard input fields, you can support file uploads, add jQuery validation, and setup Google reCAPTCHA. Below are a few examples of how to add these advanced functions to your AJAX forms.

File uploads with AJAX

Paste the example code below anywhere before the</body> tag.

<script type="text/javascript">
var form = document.getElementById("my-contact-form");
var formMessage = document.getElementById("form-message");
var uploadButton = document.getElementById("upload-button");
var fileSelect = document.getElementById("file-select");
form.onsubmit = function(event) {
  event.preventDefault();
  uploadButton.innerHTML = "Uploading...";
  var formData = new FormData(form);
  /* Remove or alter unwanted parameters from submissions */
  var xhr = new XMLHttpRequest();
  xhr.open("POST", form.action, true);
  xhr.onload = function(e) {
    var response = JSON.parse(xhr.response);
    if (xhr.status === 200) {
      formMessage.innerHTML = "Success";
    } else {
      formMessage.innerHTML = "Error: " + response.error;
    }
  };
  xhr.send(formData);
};
</script>

Taking the HTML form code from the basic AJAX example above, you need to add a new input with type="file" and id="file-select". Also make sure to add id="upload-button" to your button element. Now your form code should look like this:

<form action="https://usebasin.com/f/1a2b3c4d5e6f" method="POST" id="my-contact-form">
  <label for="email-address">Email Address</label>
  <input type="email" id="email" name="email" required>
  <label for="resume">Resume</label>
  <input type="file" id="file-select" name="resume" placeholder="Your Resume">
  <button type="submit" id="upload-button">Upload</button>
  <div id="form-message"></div>
</form>

And that\'s it. You now have a AJAX form that supports file uploads.

More examples[Coming Soon]
  • jQuery validation with AJAX
  • Google reCAPTCHA with AJAX
  • Kitchen sink with AJAX