submit提交和button提交的区别

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36409988/article/details/78019935

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>

猜你喜欢

转载自blog.csdn.net/qq_36409988/article/details/78019935