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异步提交。但是了解一些还是好的。。。