1、表单提交
表单提交是刚开始学js的朋友很迷惑的一个问题，怎么提交，怎么阻止默认提交，怎么提交表单不跳转等等问题，下面是一些示例
2、补充知识
原始的表单提交有button按钮提交和<input />类型的。它们又什么区别呢？
-
<button>按钮 : 在<form>表单中，可以使用<button>来提交表单,<button>按钮有一个默认的type属性，其存在一定的兼容性问题,低版本IE 的默认类型是 "button", 而其他浏览器中（包括 W3C 规范）的默认值是 "submit",所以在<form>表单中使用<button>时，始终为按钮添加type属性。 -
<input />按钮在<form>表单中使用时必须指定type类型。 - 在
<form>表单中，若<button>按钮或者<input />的type='submit',则默认是会提交表单的，且页面会跳转到相应的action地址。 -
<form>标签有一个onsubmit属性，在提交表单时会触发这个事件，且如果这个事件返回值是false时，是会阻止表单提交的。如果该函数返回其他值或什么都没有返回，则表单会被提交 - form.submit()提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用(事件调用的优先顺序是DOM绑定的事件优先与直接写在html中的事件)。
3、示例
(1) 默认表单提交
<form name="myForm" action="" >
<input type="text" name="userName">
<input type="password" name="userPw">
<!-- <button type="submit">提交</button> -->
<input type="submit" name="" value="提交">
</form>
(2)默认不会提交表单
<form name="myForm">
<input type="text" name="userName">
<input type="password" name="userPw">
<!-- <button type="button">提交</button> -->
<input type="button" value="提交">
</form>
(3) 如果在form,我们使用了type=''submit属性，但是不让表单默认提交，有什么办法呢？看下面
//方法一 :
<form name="myForm" action="" onsubmit="stopSub(event)">
<input type="text" name="userName">
<input type="password" name="userPw">
<!-- <button type="submit">提交</button> -->
<input type="submit" name="" value="提交吧">
</form>
<script>
var btn = document.getElementsByTagName('button')[0];
function stopSub(e) {
e.preventDefault() //阻止from表单的默认提交事件
}
</script>
//方法二 : 参见补充知识第四点
<form name="myForm" onsubmit="return false">
<input type="text" name="userName">
<input type="password" name="userPw">
<button type="submit">提交</button>
<input type="submit" name="">
</form>
(4) 如果在form,我们使用了type=''button属性，但是还是需要提交表单，这是可以使用ajax来提交，好处是可以自己控制提交，并且页面不会跳转
<form name="myForm">
<input type="text" name="userName">
<input type="password" name="userPw">
<button type="button">提交</button>
</form>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
alert('使用ajax提交+验证')
}
</script>
(5)若是使用默认提交的方法，且提交之前验证表单，方法看下面
<form name="myForm" action="" onsubmit="return checked()">
<input type="text" name="userNameOne">
<input type="password" name="userPwOne">
<button type="submit">提交</button>
</form>
<script type="text/javascript">
function checked() {
var input = document.getElementsByTagName('input');
for(var i = 0; i < input.length; i++) {
var valueCon = input[i].value;
if(!valueCon) {
alert('值不能为空')
return false
}
}
}
</script>
(6) 若是使用了type='button'属性，但是还是想实现默认提交的方式怎么办？ 看下面
<form name="myForm" action="" onsubmit="console.log('表单的 onsubmit 事件句柄不会被调用')">
<input type="text" name="userName">
<input type="password" name="userPw">
<button type="button">提交</button>
</form>
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0],
input = document.getElementsByTagName('input'),
form = document.myForm,
flag = null,
i;
btn.addEventListener('click', function() {
for(i = 0; i < input.length; i++) {
var valueCon = input[i].value;
flag = valueCon !== '' ? true : false;
if(!flag) return;
}
// 参考补充知识第五点
flag && form.submit()
})
</script>
(7) 下面的提交会发生什么？
<form name="myForm" action="" onsubmit="console.log('表单的onsubmit事件句柄在form.submit()调用时失效'); return false;">
<input type="text" name="userName">
<input type="password" name="userPw">
<button type="submit">提交</button>
</form>
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0],
input = document.getElementsByTagName('input'),
form = document.myForm,
flag = null,
i;
btn.addEventListener('click', function() {
for(i = 0; i < input.length; i++) {
var valueCon = input[i].value;
flag = valueCon !== '' ? true : false;
if(!flag) return;
}
// 参考补充知识第五点
flag && form.submit()
})
</script>
分析 : 点击提交按钮:
(1)当表单验证失败时，不会触发form.submit()函数，所以可以触发<form>的onsubmit句柄，又因为该句柄return false所以表单不会从该句柄处默认提交，所以会在控制台打印出表单的onsubmit事件句柄在form.submit()调用时失效'
(2)当表单验证成功时,会触发form.submit()函数提交表单，又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用，所以控制台不会打印出表单的onsubmit事件句柄在form.submit()调用时失效
4、结尾
现在表单默认提交的方式基本没人用了，都是ajax异步提交。但是了解一些还是好的。。。
