提交表单是在学习js时经常让人困惑的一个问题,大家常常会问如何提交表单、如何阻止默认的提交方式、如何让表单提交后不跳转等等问题。下面我给大家举一些例子来说明。
首先,我们来看一下最原始的表单提交方式。一种是通过按钮来提交,另一种是通过 `` 标签来提交。它们有什么区别呢?
第一种是默认的表单提交方式,也就是点击按钮就会触发提交。而第二种是默认不会提交表单,需要我们自己添加一些代码来实现。
如果我们在 form 标签中使用了 type='submit' 属性,但又不希望表单默认提交,有什么办法呢?我们可以通过下面的方法来实现:
```javascript
form.onsubmit = function() {
// 阻止表单默认提交
return false;
}
```
如果我们在 form 标签中使用了 type='button' 属性,但是又需要提交表单,可以使用ajax来实现。这样的好处是可以自己控制提交的方式,并且页面不会发生跳转。
如果我们希望在默认提交表单的方式下进行表单验证,可以使用以下方法:
```javascript
form.onsubmit = function() {
// 对表单进行验证
if (!validateForm()) {
// 验证不通过,则阻止表单默认提交
return false;
}
}
```
如果我们使用了 type='button' 属性,但是又希望实现默认的表单提交方式,可以使用以下方法:
```javascript
form.onsubmit = function() {
// 提交表单
form.submit();
}
```
有人可能会问,每次点击提交按钮后会发生什么呢?让我们来分析一下: