RealtimeForm 1.1.1

Really quick auto saving forms that send data via AJAX as values within it change. No need for submit buttons.



Details

Author
Callum Jefferies
Current version
1.1.1
GitHub
callum-/realtime-form
Downloads
2989
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.4: '*'

How to use

Give your form element an id attribute, then pass this as the first argument to a new instance of the RealtimeForm class, just like this:

<form id="user-info" action="/update/user" method="POST">
    <input type="hidden" name="id" value="1">
    <input type="radio" name="gender" value="male">
    <input type="radio" name="gender" value="female">
</form>

<script>
    new RealtimeForm('user-info');
    // Resulting request URL: http://example.com/update/user?id=1&gender=male
</script>

If you don't want to send the data, you can just pass it to the change function instead:

new RealtimeForm('user-info', {
    change: function(field, value) {
        alert("Value of " + field.name + " is '" + value + "'")
    }
});

If you'd like a fallback for JavaScript disabled browsers, you could include the following inside your form element:

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

Options

  • json - send data as JSON or a standard query string.
  • send_all - send all the data, or just the field that's been changed.
  • flood_timeout - time in milliseconds to delay the sending of text fields.
  • include_hidden - include hidden fields in all requests.
  • ignore_fields - field names to ignore.
  • change - fired when a value changes.
  • success - fired on successful request.
  • failure - fired on failed request.

Changelog

Version 1.1

  • Added: support for select fields with the multiple attribute
  • Added: now inherits the form element's request method (was restricted to POST before)
  • Fixed: requests are now properly chained

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus