1、表單提交

表單提交是剛開始學(xué)js的朋友很迷惑的一個問題，怎么提交，怎么阻止默認(rèn)提交，怎么提交表單不跳轉(zhuǎn)等等問題，下面是一些示例

2、補充知識

原始的表單提交有button按鈕提交和<input />類型的。它們又什么區(qū)別呢？

• <button>按鈕 : 在<form>表單中，可以使用<button>來提交表單,<button>按鈕有一個默認(rèn)的type屬性，其存在一定的兼容性問題,低版本IE 的默認(rèn)類型是 "button", 而其他瀏覽器中（包括 W3C 規(guī)范）的默認(rèn)值是 "submit",所以在<form>表單中使用<button>時，始終為按鈕添加type屬性。
• <input />按鈕在<form>表單中使用時必須指定type類型。
• 在<form>表單中，若<button>按鈕或者<input />的type='submit',則默認(rèn)是會提交表單的，且頁面會跳轉(zhuǎn)到相應(yīng)的action地址。
• <form>標(biāo)簽有一個onsubmit屬性，在提交表單時會觸發(fā)這個事件，且如果這個事件返回值是false時，是會阻止表單提交的。如果該函數(shù)返回其他值或什么都沒有返回，則表單會被提交
• form.submit()提交表單的方式與用戶單擊 Submit 按鈕一樣，但是表單的 onsubmit 事件句柄不會被調(diào)用(事件調(diào)用的優(yōu)先順序是DOM綁定的事件優(yōu)先與直接寫在html中的事件)。

3、示例

(1) 默認(rèn)表單提交

<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)默認(rèn)不會提交表單

<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屬性，但是不讓表單默認(rèn)提交，有什么辦法呢？看下面

//方法一 :
<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表單的默認(rèn)提交事件
    }
</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來提交，好處是可以自己控制提交，并且頁面不會跳轉(zhuǎn)

<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)若是使用默認(rèn)提交的方法，且提交之前驗證表單，方法看下面

<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'屬性，但是還是想實現(xiàn)默認(rèn)提交的方式怎么辦？ 看下面

<form name="myForm" action="" onsubmit="console.log('表單的 onsubmit 事件句柄不會被調(diào)用')">
    <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) 下面的提交會發(fā)生什么？

<form name="myForm" action="" onsubmit="console.log('表單的onsubmit事件句柄在form.submit()調(diào)用時失效'); 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)當(dāng)表單驗證失敗時，不會觸發(fā)form.submit()函數(shù)，所以可以觸發(fā)<form>的onsubmit句柄，又因為該句柄return false所以表單不會從該句柄處默認(rèn)提交，所以會在控制臺打印出表單的onsubmit事件句柄在form.submit()調(diào)用時失效'
(2)當(dāng)表單驗證成功時,會觸發(fā)form.submit()函數(shù)提交表單，又因為 form.submit()提交表單的方式與用戶單擊 Submit 按鈕一樣，但是表單的 onsubmit 事件句柄不會被調(diào)用，所以控制臺不會打印出表單的onsubmit事件句柄在form.submit()調(diào)用時失效

4、結(jié)尾

現(xiàn)在表單默認(rèn)提交的方式基本沒人用了，都是ajax異步提交。但是了解一些還是好的。。。