Ajax Form

An easy way to submit form contents & load the response into a section of the page.

Examples

Here are a couple of use examples of the AJAX Form feature.

Basic Example

This example contains the minimum attributes need. The form contains the data-ajax-form attribute which triggers the form to submit via ajax instead of a web page reload. The action attribute specifies the URL to pull the content from, the content is expected to be in HTML format.

<form data-ajax-form action="/ajax/alert_success">
  <div class="form-group">
    <label for="title-example" class="py-2">Title</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary  mt-3" type="submit">
    Save Title
  </button>
</form>

On Complete Example

This examples show the use of the On Complete functionality to load additional content after the initial ajax request completes. We use the attribute data-on-complete-load to define the URL to load after the form completes and the data-on-complete-target attribute to identify the DOM node to load the on complete content. This is useful for things like a shopping list loading into a sidebar.

On Complete Target
<form data-ajax-form action="/ajax/alert_success" data-on-complete-load="/ajax/alert_success" data-on-complete-target="#on-complete-target-1">
  <div class="form-group">
    <label for="title-example" class="py-2">Title</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary  my-3" type="submit">
    Save Title
  </button>
</form>

<div id="on-complete-target-1">On Complete Target</div>

On Complete Hide

This example shows adding the Hide On Complete feature. The hide feature applies a CSS display none to the element, leaving it’s content in place but hidden from view.

I need to be hidden once you complete your Ajax call. 
<form data-ajax-form action="/ajax/alert_success" data-on-complete-hide="#example-hide-1">
  <div class="form-group">
    <label for="title-example" class="py-2">Title</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary  mt-3" type="submit">
    Save Title
  </button>
</form>

<div class="alert alert-secondary mt-3" id="example-hide-1">
  I need to be hidden once you complete your Ajax call.
</div>

On Complete Clear

This example shows adding the Clear On Complete feature. The clear feature deletes all content from a specified element.

I need my content cleared once you complete your Ajax call. 
<form data-ajax-form action="/ajax/alert_success" data-on-complete-clear="#example-clear-1">
  <div class="form-group">
    <label for="title-example" class="py-2">Title</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary  mt-3" type="submit">
    Save Title
  </button>
</form>

<div class="alert alert-secondary mt-3" id="example-clear-1">
  I need my content cleared once you complete your Ajax call.
</div>

On Complete Show

This example shows adding the Show On Complete feature. The show feature applies a CSS display block to the element, revealing previously hidden elements.

<form data-ajax-form action="/ajax/alert_success" data-on-complete-show="#example-show-1">
  <div class="form-group">
    <label for="title-example" class="py-2">Title</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary mt-3" type="submit">
    Save Title
  </button>
</form>

<div class="alert alert-secondary mt-3 d-none" id="example-show-1" style="display: none">
  I need to be shown once you complete your Ajax call.
</div>

Example with All Options

In the following example we enable all of the optional attributes, including data-target and data-power-bar. By default the ajax will replace the form with the ajax content, in this example we select a different target using the data-target attribute, it accepts standard jQuery selectors. The data-power-bar attribute triggers a reload of the Shopping List Power Bar after the ajax content is returned.

Ajax Content goes here.
On Complete Target
I need to be hidden once you complete your Ajax call.
I need my content cleared once you complete your Ajax call.
I need to be shown once you complete your Ajax call. 
<form data-ajax-form action="/ajax/alert_error" data-target="#target-1" data-power-bar  data-on-complete-load="/ajax/alert_success" data-on-complete-target="#on-complete-target-2" data-on-complete-hide="#example-hide-2"  data-on-complete-clear="#example-clear-2"  data-on-complete-show="#example-show-2">
  <div class="form-group">
    <label for="title-example" class="py-2">Title</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary  mt-3" type="submit">
    Save Title
  </button>
</form>
<div id="target-1" class="my-4">
  <div class="alert alert-success">Ajax Content goes here.</div>
</div>
<div id="on-complete-target-2">On Complete Target</div>

<div class="alert alert-secondary mt-3" id="example-hide-2">
  I need to be hidden once you complete your Ajax call.
</div>

<div class="alert alert-secondary mt-3" id="example-clear-2">
  I need my content cleared once you complete your Ajax call.
</div>

<div class="alert alert-secondary mt-3 d-none" id="example-show-2">
  I need to be shown once you complete your Ajax call.
</div>

Repeating Example

This example returns a result which contains another data-ajax-form form. This is useful for error responses or other instances where you want to results to contain another Ajax Form. This example takes you through 3 forms that are all brought onto the page via Ajax until finally arriving at the final success message.

<form data-ajax-form action="/ajax/ajax_form">
  <div class="form-group">
    <label for="title-example" class="py-2">Title for Ajax Form 0 of 3</label>
    <input type="text" class="form-control p-2" name="title-example" id="title-example" placeholder="Title">
  </div>
  <button class="btn btn-primary  mt-3" type="submit">
    Save Title
  </button>
</form>

Attributes

The data-ajax-form & action attributes are required. The rest are optional.

Options Description
data-ajax-form The presence of this attribute indicates submitting on this form should trigger an AJAX load.
action Attribute specifies the URL of the content you want AJAX'd. The AJAX request should return HTML content to display inside the target element.
data-target The DOM node to load the content into. Uses standard jQuery selectors, usually targets an id attribute (e.g. #some-target). Optional, if the data-target attribute isn't present the content will replace the ajax form.
data-on-complete-load When present, completing the ajax call triggers a second ajax call to the url specified in this attribute. The results are to be HTML and will be loaded into the elements defined in the data-on-complete-target attribute.
data-on-complete-target The DOM node to load the on complete content into. Uses standard query selectors, usually targets an id attribute (e.g. #some-target). Only used when the data-on-complete-load attribute is present.
data-on-complete-hide When present, completing the ajax call causes the specified DOM element to be hidden from view.
data-on-complete-clear When present, completing the ajax call causes the specified DOM element to have it's content cleared.