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.