表单提交：事件和方法 submit

原文链接：http://javascript.info/forms-submit，translate with ❤️ by zhangbao.

提交表单时，会触发 submit 事件。此事件通常用于表单的数据验证（在表单数据送往服务器之前），如果验证失败，则中断向服务器的数据提交。

我们还可以使用 form.submit() 方法手动提交表单。这样我们就可以动态地创建和发送自定义表单数据到服务器了。

下面我们讨论更多细节。

事件：submit

主要有两个提交表单的方式：

1. 第一个——点击 <input type="submit"> 或者 <input type="image">。

2. 第二个——在输入框中按下回车键。

两种行为都会触发 submit 事件。处理程序中可以对数据进行检查，如果发现错误，就显示错误纤细，然后调用 event.preventDefault() 方法阻止表单数据向服务器提交。

我们按照下面的指示操作

<form onsubmit="alert('submit!');return false">
  一、 在文本框里按下回车：<input type="text" value="text"><br>
  二、 点击“submit”按钮：<input type="submit" value="Submit">
</form>

能发现，两个操作都会导致弹出 alert，又因为使用了 return false，所以表单数据不会被提交。

submit** 和 click** 之间的关系

当我们在表单的一个文本框里按下回车键的时候，就会触发 <input type="submit"> 上的 click 事件。

这很有趣，因为我们就没点击这个 submit。

下面是演示 demo：

<form onsubmit="return false">
 <input type="text" size="30" value="鼠标点这里然后按下 Enter">
 <input type="submit" value="Submit" onclick="alert('点击')">
</form>

方法：submit

向服务器手动提交一个表单，可以使用 form.submit()。

但是这种手动提交的方式，不会触发 submit 事件。因为这种行为认为，在脚本里已经做好了所有的相关操作。

这种方式通常用来手动创建和发送表单数据：、

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';
form.innerHTML = '<input name="q" value="test">';
// 为了能提交表单，必须将表单放入文档中
document.body.append(form);
form.submit();

练习题

问题

一、模态框中的表单

创建一个函数 showPrompt(html, callback)，使用提供的 html 参数，创建一个显示有输入框和 OK/CANCEL 按钮的表单提交模态框。

• 用户应该先在文本框中输入内容，在按下 Enter 或者 OK 按钮后，回调函数 callback(value) 携带用户输入的值被调用。

• 否则，如果用户按下的是 Esc 或 CANCEL 按钮，则调用的是 callback(null)。

两种情况下，都会结束输入进程、删除表单的。

要求：

• 表单位于窗口中央。

• 表单是以模态框的形式出现的，除非用户关闭了模态框，否则页面其他部分无法交互。

• 当显示表单时，自动聚焦表单中的输入框。

• 使用 Tab/Shift + Tab 按键只会在模态框中的表单元素里切换，不会离开当前模态框聚焦到页面中的其他部分。

使用方式：

showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});

展示效果如下：

答案

一、模态框中的表单

（完）