submit提交和button提交的區別

submit提交和button提交的區別

submit的提交:
1.一般submit提交之後就不再響應其他事件。
2.函數 onsubmit()可以用於驗證表單提交,驗證失敗不能提交

下面是例子

 <!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<script type="text/javascript">
    function testSubmit() {
        if (document.getElementById("login").value == "") {
            alert("用戶名不能爲空");
            return false;
        }else
        {
        document.getElementById("f1").action="/ajaxtest2/ajax/welcome.html";
            return true;

        }
    }
</script>


</head>

<body>
    <form name="f1" id="f1" action="" method="post" onsubmit="return testSubmit()">
        <table>
            <tr>
                <td>Login:</td>
                <td><input type="text" name="login" id="login">
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password" id="password">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

下面是button按鈕的用法

<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<script type="text/javascript">
    function testSubmit() {
        if (document.getElementById("login2").value == "") {
            alert("用戶名不能爲空");
            document.getElementById("login2").focus();
            return false;
        }else
        {
        document.getElementById("f2").action="/ajaxtest2/ajax/welcome.html";
            return true;

        }
    }
</script>


</head>

<body>  
        <form name="f2" id="f2" action="" method="post">
        <table>
            <tr>
                <td>Login:</td>
                <td><input type="text" name="login2" id="login2">
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password2" id="password2">
                </td>
            </tr>
            <tr> 
                <td colspan="2" align="center"><input type="button" onclick="testSubmit()" value="提交">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章