|
|
|
|
Issue #110 (form.submit(), jQuery Plugins, JS Utils, Media)08/27/15
Here's something a little quirky with regards to forms. As you probably know, when a form is submitted, the submit event is fired. This allows developers to use the onsubmit event handler to check when a form is submitted and temporarily intercept the submission while data is validated. The same is also true of the reset button on forms (which you should rarely, if ever, use); the reset action can be temporarily stopped using the onreset handler.
But maybe you didn't know that both these events can be mimicked using the submit() and reset() methods, respectively. Something like this:
|
document.querySelector('form').reset(); document.querySelector('form').submit();
|
In this case, the first form found on the page will be reset, and then submitted.
But what's strange about these two methods is that neither of them triggers the submit or reset events. Look at the following example code. This assumes we have a form with a submit button and then a separate unrelated button outside of the form.
|
var myForm = document.querySelector('form'),
myBtn = document.querySelector('button');
myForm.addEventListener('submit', function (e) {
console.log('submitted');
e.preventDefault();
}, false);
myBtn.addEventListener('click', function () {
myForm.submit();
}, false);
|
(JS Bin demo)
Try first hitting the "SUBMIT" button in the demo. Notice the log outputs the fact that the submit event has been fired. The other button is the separate non-form element. In the code, I'm triggering the submit() method on the form when that button is clicked. Notice that the form submits (shown by the fact that the page goes blank) but the console doesn't display the "submitted" message. This is because the submit event was not fired, even though the submit() method was.
To be completely honest, I'm not 100% sure why this happens but it seems to have been in place for quite some time in old browsers so my guess is the behaviour is still present for legacy reasons. Some notes I uncovered:
- While MDN explains it correctly, the DOM 2 spec incorrectly says that the behaviour is the same.
- The updated WHATWG spec has a full "Form Submission Algorithm" that makes more of a distinction but it's as clear as mud in my opinion.
- This problem has caused developers to file related bugs with the jQuery team, although one commenter seemed to say that jQuery made a correction in a later version to deal with this.
Regardless, it's good to know that there's a difference between the submit() method and the natural way that forms are submitted, in case you're considering using submit().
Now on to this week's tools!
jQuery Plugins
Keyframes.Pathfinder
"A plugin for jQuery.Keyframes that generates complex movement paths."
popSelect
"A jQuery plugin to replace the traditional select box with a sleek Popover with options pre-populated. Better User interface than any other multiselects."
jQuery-menu-aim
"For dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents."
pickadate.js
"The mobile-friendly, responsive, and lightweight jQuery date and time input picker."
Timepicker
"Adds a timepicker to jQueryUI Datepicker."
Feedback Me
Allows the user to easily add an animatable UI widget with a feedback form that slides from the side of the screen.
zelect
Another select drop-down replacement, allows custom CSS and asynchronous loading of large lists.
JavaScript Utilities and Mini Libraries
Stretchy
"Form element autosizing, the way it should be."
You might not need jQuery plugins
A directory of vanilla JavaScript plugins with the option to filter by IE support.
NodeList.js
"Makes using the Native DOM APIs on an array of nodes as easy as jQuery with the benefits of it being extremely small at around 5k gzipped."
react-image-placeholder
"A simple [React] image placeholder component that uses some of the many placeholder sites + some funky components for the swag."
Mousetrap
"A simple library for handling keyboard shortcuts in JavaScript."
React Sparklines
Beautiful and expressive sparklines (a kind of simple data visualization) component for React. Renders as SVG.
brototype
A utility to help avoid "undefined is not a function" errors because of deeply nested objects.
aj(ax)
"Smallest and fastest Ajax library with differentiations according to the use case."
Image and Multimedia Tools
BoomSVGLoader
"Ajax solution for your SVG sprite. This plugin simply loads your compiled SVG sprite into the page immediately after the opening body tag.
Unsplash It
"Beautiful placeholders using images from unsplash."
Shaka Player
"A JavaScript library which implements a DASH client. It relies on HTML5 video, MediaSource Extensions, and Encrypted Media Extensions for playback."
imagify
"Resize, Crop, Manipulate. Cloud image processing on the fly."
SVG Porn
A huge collection of high-quality SVG logos.
A Tweet for Thought
David Walsh gives us his apparent feelings on Content Management Systems.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Here's a page listing the most active GitHub users. Maybe useful for those hiring...?
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
