AJAX Form

Use the AJAXForm module to setup basic AJAX form behavior, such as:

Showing loading, success, and error states
Constructing the URL
Wrangling form data into an API-friendly format
Rendering results

Examples

Basic

Please Wait...

Error!

Success!

<div class="ajax-form js-ajax-form" data-ajax-form-type="basic">
  <form action="https://reqres.in/api/users?delay=1" method="GET" class="ajax-form__form form js-ajax-form__form">
    <p>Send a response!</p>
    <button class="button" type="submit">Submit</button>
  </form>
  <div class="ajax-form__loading js-ajax-form__loading">Please Wait...</div>
  <div class="ajax-form__error js-ajax-form__error">Error!</div>
  <div class="ajax-form__success js-ajax-form__success">Success!</div>
</div>

Show Results

Note the use of the Validation module to perform front-end form validation.

Please Wait...

Sorry, there are no users with that ID.

<div class="ajax-form js-ajax-form" data-ajax-form-type="get-user">
  <form action="https://reqres.in/api/users" method="GET" class="form ajax-form__form form js-ajax-form__form js-validate">
    <p>Get User By ID</p>
    <div class="form__field">
      <input type="text" name="user_id" placeholder="User ID" required />
    </div>
    <button class="button" type="submit">Submit</button>
  </form>
  <div class="ajax-form__loading js-ajax-form__loading">Please Wait...</div>
  <div class="ajax-form__error js-ajax-form__error">
    <div>Sorry, there are no users with that ID.</div>
    <button class="button js-ajax-form__reset">Try Another ID</button>
  </div>
  <div class="ajax-form__success js-ajax-form__success">
    <div class="js-ajax-form__results"></div>
    <button class="button js-ajax-form__reset">Try Another ID</button>
  </div>
</div>