JavaScript中如何實現form表單提交

這篇文章給大家分享的是有關JavaScript中如何實現form表單提交的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

JavaScript中form表單提交有以下三種方式：通過submit按鈕直接實現表單提交，通過button按鈕觸發onclick事件實現表單提交，submit按鈕觸發onsubmit事件實現表單提交

方法一

通過使用submit按鈕來實現表單提交效果

例：

<form action="demo.asp" method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
</form>
<script>
/*這里是提交表單前的非空校驗*/
    $("form").submit(function () {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();
        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表單提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;/*阻止表單提交*/
        } else {
            alert("提交");
            return true;
        }
    })
</script>

如上述代碼所示當我們點擊提交按鈕時，表單數據會被發送到名為demo.asp的頁面。submit按鈕實現的表單提交是直接提交。但是我們可以通過某些方法實現表單提交前需要進行驗證或者是根據自己的自定義需求來做表單提交

方法二

可以通過button按鈕來實現表單提交，當點擊button按鈕時，觸發onclick事件，由JavaScript里函數判斷輸入內容是否為空，如果為空，返回false, 此時就不會發生表單提交。如果不為空，則將表單提交到由action指定的地址。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("請輸入用戶帳號!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("請輸入登錄密碼!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="demo.asp" name="myform" method="post">
    用戶帳號<input type=text name="userId" size="18" value="" ><br>
    登錄密碼<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陸" onclick="check(this.form)">  
</form>

注意：這個方法中由于button按鈕不具備自動提交的功能，所以由JavaScript語句來實現提交

方法三

通過使用submit按鈕實現表單提交。當我們點擊submit按鈕時，首先觸發onsubmit事件，然后由JavaScript里的函數來判斷輸入內容是否為空，如果輸入內容為空，則返回false, 表單不提交。如果輸入內容不為空，則提交到由action指定的地址

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("請輸入用戶帳號!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("請輸入登錄密碼!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="demo.asp act=login" method="post" onsubmit="return check(this)">
    用戶帳號<input type=text name="userId" size="18" value="" ><br>
    登錄密碼<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陸"> 
</form>

感謝各位的閱讀！關于JavaScript中如何實現form表單提交就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！