Javascript高级编程学习笔记（74）—— 表单（2）表单提交及重置

表单提交

表单的很大一部分作用就是帮助用户完成和服务器的交互

所以表单提交是表单中比较重要的部分

 

虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单，但是仍有部分操作需要使用表单来完成，例如上传文件等

表单的提交一般来说是通过图像按钮，或者提交按钮来实现的

提交按钮既可以是 input 元素 也可以是 button 元素，如下所示：

<!--通用提交按钮-->
<input type = "submit" value = "Submit Form">


<!--自定义提交按钮-->
<button type = "submit">Submit Form </button>


<!--图像按钮-->
<input type = "image" src = "loading.gif">

 

这些按钮在拥有焦点的情况下 按下表单就会提交；当然点击这些按钮也会提交

当通过这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件

 

该事件通常用于验证用户发送的信息，以便减轻服务器的负担

此外，通过阻止该事件的默认行为可以取消表单的提交

如下所示：

var form = document.forms[0]; // 获取页面的第一个表单

form.addEventListener("submit",function(event){
    event.preventDefault();// 阻止默认事件，即就算点击了提交按钮也不会发送给服务器
},false)

 

当然我们也可以通过 submit 方法来提交表单：

form.submit();// 提交表单这里的 form 和上方代码中form一样

 

需要注意的是：调用submit方法并不会触发 submit 事件，所以我们在使用JS代码提交之前需要对表单信息进行验证

此外表单提交可能出现的最大问题就是重复提交，所以在处理时最好在第一次表单信息发送给服务器后将提交按钮禁用，或者取消后续的提交

 

重置表单

有时候我们需要重置表单的信息

只要 type 为 reset 的 input 或 button 元素都可以创建重置按钮

<!--通用重置按钮-->
<input type = "reset" value = "Reset">


<!--自定义重置按钮-->
<button type = "reset">Reset</button>

 

通过重置按钮重置表单时，所有表单字段会恢复到页面加载完成的初始状态

 

同样，在我们单击（或回车）重置按钮时，浏览器会触发 reset 事件

我们也可以通过阻止 reset 事件的默认行为来阻止浏览器的重置：

var form = document.forms[0]; // 获取页面的第一个表单

form.addEventListener("reset",function(event){
    event.preventDefault();// 阻止默认事件，阻止浏览器的重置
},false)

 

同样，通过 reset 方法 我们可以通过代码来触发页面的重置

form.reset();

 

通常来说用到重置的地方很少，因为用户在你重置表单之后并不一定有耐心再重新填写一遍

所以在使用时要十分小心