jQuery OSDI Demo

The jQuery OSDI plugin implements non-authenticated POST via AJAX against OSDI-compliant API endpoints.

The plugin is called on a form and can contain various options, explained in more detail here. See the demo below for some examples on how it can be used.

Simple Form Example

In this example, the plugin is called over a form with default options. It will use the form’s action attribute as the OSDI API endpoint to POST to, and it will use the data entered in the form inputs (which are specially named so the plugin can pick them up) as the POST body. It will tell the server to send an autoresponse email as well (which is the default).

(Note: This demo points to a non-working API endpoint, so while the plugin will execute, the actual POST will always fail.)

Demo

Code

<form id="simple-demo" action="https://osdi-sample-system.com/api/v1/petitions/41e14e41-3ba5-4304-8b6e-2dddcd528f98/signatures"  method="post">
  <label>First Name:</label>
  <input type="text" name="given_name" />
  
  <label>Last Name:</label>
  <input type="text" name="family_name" />
  
  <label>Email Address:</label>
  <input type="text" name="email_address"/>
  
  <label>Street Address:</label>
  <input type="text" name="street" />
  
  <label>City:</label>
  <input type="text" name="locality" />
  
  <label>State (two digits):</label>
  <input type="text" name="region" />
  
  <label>Zip/Postal Code:</label>
  <input type="text" name="postal_code" />
  
  <label>Country (two digits):</label>
  <input type="text" name="country" />
  
  <label>Phone Number:</label>
  <input type="text" name="phone_number"  />

  <label>Member Number:</label>
  <input type="text" name="custom[member_number]">

  <label>Is Member</label>
  <label><input type="radio" name="custom[is_member]" value="1"> Yes</label>
  <label><input type="radio" name="custom[is_member]" value="0"> No</label>

  <button type="submit" id="simple_submit" value="Submit" class="btn-primary btn">Submit</button>
</form>

<script type="text/javascript">
$(document).ready(function() {
  $('#simple-demo').osdi();
});
</script>

Back to top…

Custom Example

In this example, the plugin is called with custom options, including a custom built body JSON instead of one derived from the form inputs directly, a custom endpoint instead of the one specified by the form’s action attribute, custom AJAX event handlers, the add_tags option, and the autoresponse is suppressed.

(Note: This demo points to a non-working API endpoint, so while the plugin will execute, the actual POST will always fail.)

Demo

Code

<form id="custom-demo" action="/" method="post">
  <label>First Name:</label>
  <select name="first" id="first">
    <option value="">[choose one]</option>
    <option value="Adam">Adam</option>
    <option value="Eve">Eve</option>
  </select>
  
  <label>Email Address:</label>
  <input type="text" name="email_address" id="email" />
  
  <button type="submit" id="custom_submit" value="Submit" class="btn-primary btn">Submit</button>
  
  <div id="success"></div>
</form>

<script type="text/javascript">
$(document).ready(function() {
  $('#custom-demo').osdi({
    endpoint: "https://osdi-sample-system.com/api/v1/petitions/41e14e41-3ba5-4304-8b6e-2dddcd528f98/signatures",
    body: function() {
      return {
        "person": {
          "given_name": $('#first').val(),
          "email_addresses": [
            {
              "address": $('#email').val()
            }
          ]
        },
        "add_tags": [
          "volunteer"
        ]
      }
    },
    done: function(data, textStatus, jqXHR) {
      console.log('done');
      $('#success').html('<p><strong>It worked!</strong></p>');
    },
    fail: function(jqXHR, textStatus, errorThrown) {
      console.log('fail');
      $('#success').html('<p><strong>It failed!</strong></p>');
    },
    always: function(data_jqXHR, textStatus, jqXHR_errorThrown) {
      console.log('always');
    }
  });
});
</script>

Back to top…