Wednesday, December 10, 2008

Submit Killer jQuery plugin

Perhaps, web forms data processing is one of the most frequent problems that JavaScript programmers have to solve. Thesse are form validation, AJAX-submitting and a lot of another stuff. Almost always we have to prevent normal form submitting. The simplest solution for this problem which comes to mind first is using <input type="button" /> instead of <input type="submit" />. But this decision is far from perfectness. First, the form is broken when the user have JavaScript disabled. Second, we still give the possibility of submitting by pressing the Enter key on the textbox. So this decision is unreliable and badly-designed, because it doesn't get the possibility to normally submit the form for users that have JavaScript disabled. A more correct approach is to allow the user with JavaScript turned off to perform default submitting , but if JavaScript is enabled, prevent default submitting and process form data somehow using client-side scripting. This principle is called progressive enhancement.

Thus, in order to prevent normal submitting of a web form, you need to prevent default browser behaviour for clicking on submit and image buttons and pressing the Enter key on the textbox. Too much for such a small task. In order to simplify this task upo to one line of JavaScript code, I wrote jQuery plugin called Submit Killer, the only purpose of which is preventing default submitting of web-forms.

Using Submit Killer is very simple. All you have to do is to call the killSubmit method, while jQuery object must contain elements of forms for which you want to prevent default submitting. The simplest case would look like this:


$("form").killSubmit();

This code snippet will prevent default submitting of all web forms on the web page. I'll be glad if Submit Killer helps developers to solve their problems. Leave comments here if you have some suggestions on improving or bug reports.

Good luck!

Resources

1 comment:

Christian Mölders said...

Very usefull i have just implemented it and it works.
Thanks for the code!