work-in-progress

[Plug-in for jQuery][plugin] 1.3 or higher

HTML forms lack support for PUT and DELETE idempotent HTTP methods and browsers often simply downgrade to safe GET. An unpleasant aspect of going CRUDe and RESTful.

Submit aims to bridge this gap by performing the <form> submit via jQuery's reliant AJAX implementation. Thus handling methods properly and preventing the browser from downgrading at the same time. Submit is eventful and super thin (1k!). Ideal for RESTful applications.

jquery.submit -min.js (1.067 kb), .js (1.696 kb) or the entire .zip

No Javascript. Just add "jquery-submit" class to your <form> and use any method you like (even PUT or DELETE):

<form class="jquery-submit" method="PUT">

Unlike classic form submission, you don't get your response from the server directly. Instead you always get another URL address. In response to any submit, both success and error, a plain-text response URL is expected. This URL needs to be resolvable with GET. Browser then automatically redirects to the response URL.

Submit utilizes standard jQuery's .ajax method to deliver over the network. You can therefore use all its available settings. Assign them as properties of $.submit.ajaxSettings object.

You can very easily submit into a DOM element without leaving the current page. Submit will utilize jQuery's .load() method to load the URL into whatever matches jQuery selector specified in <form>'s target attribute.

<form target="#result" class="jquery-submit" method="PUT">

will submit the form, load the result and render it inside DOM element #result.

Equally simply you can load only a portion of the response document. By extending the target attribute with < followed by another jQuery selector. The second one is supplied to .load() as the "after the space" selector.

<form target="#result < #section" class="jquery-submit" method="PUT">

will cut-out contents of element #section in the response and render it inside #result.

Submit is event-driven and important moments are announced via the jQuery Event Model and can be listen to.

Prior to the actual form submit a "get-submit", "post-submit", "put-submit" or "delete-submit" event is triggered on the <form>. Bind to these events the usual way. Handler will accept form and method attributes. You can return boolean false from the handler to prevent the form from being submitted.

$('form').bind("put-submit", function(event, form, method){
	return false;
});

You may also return an object of specific settings for the .ajax call. Some of them may get overriden.

$('form').bind("put-submit", function(event, form, method){
	return {
		beforeSend: function(){ ... }
	}
});

Similarly, after completion "get", "post", "put" or "delete" event is triggered on the <form> right before Submit either redirects or loads the response URL. Handler will accept form, result and url attributes. Return false to prevent it from happening if you want to handle the response by yourself.

Dual licensed under the MIT and GPL licenses. Copyright (c) 2010 Petr Vostrel

Fork me on Github!