内容简介:HTMLWhat remained a little bit tricky was to submit forms from within the scope of JavaScript. TheLet's assume we have the following HTML form:
HTML form
elements are the foundation for the interactions in web pages. And boy, they improved quite a little bit over the last years. Developers now can use different types
( number
, tel
, color
, ...) and set different input modes
( text
, decimal
, email
, ...) to only name two examples.
What remained a little bit tricky was to submit forms from within the scope of JavaScript. The HTMLFormElement
defines a
submit
method
, but it does not quite behave as one would expect.
HTML's default behavior and the not matching submit
method
Let's assume we have the following HTML form:
<form action="">
<label>
Your name
<input type="text" required>
</label>
<button>Submit</button>
</form>
And some JavaScript:
document.querySelector('form')
.addEventListener('submit', (event) => {
// don't submit the form if it's valid
// only log to the console
event.preventDefault();
console.log('submitted form');
});
When one clicks the submit
button the following happens:
submit submit
The submit
event gives developers a way to react to form submissions. And it's used a lot! Common scenarios are to call preventDefault
and make AJAX requests using JavaScript.
But what happens when you grab the form and submit it in JavaScript land?
The answer is – the form is submitted! ( ♂️
duh!) What's surprising is that there won't be an input validation
, and
there won't be a submit
event
. You would transfer all the values included in the form at the given time. This could lead to unexpected behavior, and it is not what one would expect by calling submit
.
You can work around this problem by calling click
on the submit button. This action triggers the standard behavior, including validation and a fired submit
event.
And this approach works, great – case closed! I never thought of it as elegant or pretty, though.
A new method that does what developers expect
People started to work on a solution to this in June 2019
(the proposal is an interesting read). The HTMLFormElement
now includes an extra method called requestSubmit
. And this method does the same as clicking a submit
button. :tada:
There is not much magic to it – it does what you expect and offers the great goodies HTML forms ship by default. I have to say – I'm excited about it!
submit
|
requestSubmit
|
|---|---|
doesn't trigger submit
event |
triggers submit
event |
| doesn't trigger validation | triggers validation |
| can't be canceled |
can be canceled via event.preventDefault
in a submit
event handler |
The browser support is as follows (there is not caniuse.com entry at the time of writing:
- :white_check_mark: Chromium browser (the new Microsoft Edge, Chrome, Opera, ...)
- :x: Firefox (it's currently behind a flag and will ship with v75)
- :x: Safari
You can read more about it on MDN , have a look at it in the spec or see it in action on CodePen .
You can see a #devsheet visualizing the difference in the video below.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
极致:互联网时代的产品设计
戴维•罗斯 / 中信出版集团 / 2016-6 / 49.00元
在不远的未来,日常物品将能够迅速理解我们的需求,改善我们的生活,并随处可见。为了实现这一预期,我们需要能够发现用户使用产品的场景,找到用户高频刚需痛点的产品设计者。 站在下一个转型发展的悬崖上,我们看到技术将更具人性。随着物联网的发展,我们习以为常的数百件日常物品:汽车、钱包、手表、雨伞甚至垃圾桶,都将回应我们的需求,了解我们,学习为我们思考。最先出现的智能硬件为什么是智能手环、无人驾驶汽车......一起来看看 《极致:互联网时代的产品设计》 这本书的介绍吧!