JavaScript中如何實(shí)現(xiàn)form表單提交

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

JavaScript中form表單提交有以下三種方式：通過submit按鈕直接實(shí)現(xiàn)表單提交，通過button按鈕觸發(fā)onclick事件實(shí)現(xiàn)表單提交，submit按鈕觸發(fā)onsubmit事件實(shí)現(xiàn)表單提交

方法一

通過使用submit按鈕來實(shí)現(xiàn)表單提交效果

例：

<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>
/*這里是提交表單前的非空校驗(yàn)*/
    $("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>

如上述代碼所示當(dāng)我們點(diǎn)擊提交按鈕時(shí)，表單數(shù)據(jù)會(huì)被發(fā)送到名為demo.asp的頁面。submit按鈕實(shí)現(xiàn)的表單提交是直接提交。但是我們可以通過某些方法實(shí)現(xiàn)表單提交前需要進(jìn)行驗(yàn)證或者是根據(jù)自己的自定義需求來做表單提交

方法二

可以通過button按鈕來實(shí)現(xiàn)表單提交，當(dāng)點(diǎn)擊button按鈕時(shí)，觸發(fā)onclick事件，由JavaScript里函數(shù)判斷輸入內(nèi)容是否為空，如果為空，返回false, 此時(shí)就不會(huì)發(fā)生表單提交。如果不為空，則將表單提交到由action指定的地址。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("請輸入用戶帳號(hào)!");
                    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">
    用戶帳號(hào)<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>

注意：這個(gè)方法中由于button按鈕不具備自動(dòng)提交的功能，所以由JavaScript語句來實(shí)現(xiàn)提交

方法三

通過使用submit按鈕實(shí)現(xiàn)表單提交。當(dāng)我們點(diǎn)擊submit按鈕時(shí)，首先觸發(fā)onsubmit事件，然后由JavaScript里的函數(shù)來判斷輸入內(nèi)容是否為空，如果輸入內(nèi)容為空，則返回false, 表單不提交。如果輸入內(nèi)容不為空，則提交到由action指定的地址

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("請輸入用戶帳號(hào)!");
                    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)">
    用戶帳號(hào)<input type=text name="userId" size="18" value="" ><br>
    登錄密碼<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陸"> 
</form>

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