找回密码
当前位置：前端开发者 > HTML > 正文

前端开发form表单提交

2018-09-20 20:46:38 分类：HTML 阅读(189) 评论(0)

前端开发工作流程 淘宝前端开发工作总结 前端开发工作内容描述

遇见个坑，一个ajax请求，表单被提交两次。
我在提交表单前，自己定义了一个函数。函数中有请求，页面不会跳转。
结果，在我点击提交表单按钮时，先执行了函数。然后页面跳转了。
原因： 我写的表单提交，使用<button value=”提交”>提交</button>。默认，button的type是submit。所以，在执行完click自定义函数后，自己又跳转了。

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>测试表单自动提交</title>
    <style type=”text/css”>
        button {
            padding: 5px 10px;
        }
        input[type=’image’] {
            width: 36px;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <p>1、只有一个输入框，回车就会提交跳转。</p>
    <form action=”http://baidu.com” method=”post” name=”form-1″ id=”form-1″>
        <input type=”text” name=”name”>
        <input type=”hidden” name=”state”>
    </form>
    <p>2、有一个button，不为其指定type类型，其中button默认type类型是submit.点击提交，会跳转。</p>
    <form action=”http://baidu.com” method=”post” name=”form-2″ id=”form-2″>
        <input type=”text” name=”name”>
        <button value=”submit”>提交</button>
    </form>
    <p>3、有一个button,设置其type为button.点击提交,不会跳转。</p>
    <form action=”http://baidu.com” method=”post” name=”form-3″ id=”form-3″>
        <input type=”text” name=”name”>
        <button value=”button” type=”button”>提交</button>
    </form>
    <p>4、有一个type为image的情况.点击提交，会跳转。</p>
    <form action=”http://baidu.com” method=”post” name=”form-4″ id=”form-4″>
        <input type=”text” name=”name”>
        <input type=”image” name=”name” value=”提交”>
    </form>
    <p>5、有一个type为button的情况.点击提交，不会跳转。</p>
    <form action=”http://baidu.com” method=”post” name=”form-5″ id=”form-5″>
        <input type=”text” name=”name”>
        <input type=”button” name=”name” value=”提交”>
    </form>
    <p>6、执行函数</p>
    <p>会先执行函数，再提交表单</p>
    <form action=”http://baidu.com” method=”post” name=”form-6″ id=”form-6″>
        <input type=”text” name=”name”>
        <button value=”submit” type=”button” onclick=”Login()”>提交</button>
    </form>
</body>
<script type=”text/javascript”>
    function Login() {
        alert(“hehe”);
    }
</script>
</html>

总结：
<input>或<a> type为“submit”、“image”,表单会自动提交。
<button>的type 为默认、“submit”，表单会自动提交。
当在提交表单的按钮上进行绑定click事件后，自动提交表单前，会执行函数。

简单的验证表单，直接提交。后台的操作是通过获取表单中元素的name值，进行请求的处理的。
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style type=”text/css”>
        input,
        button {
            margin: 10px 0;
            display: block;
        }
    </style>
</head>
<body>
    <form method=”get” name=”form-1″ id=”form-1″ action=”http://baidu.com/”>
        <input type=”text” name=”name” id=”name”>
        <input type=”text” name=”passwd” id=”passwd”>
        <button type=”submit”>提交</button>
    </form>
    <form method=”post” name=”form-2″ id=”form-2″ action=”http://baidu.com/” onsubmit=”return validate_form(this)”>
        <input type=”text” name=”name” id=”name-2″>
        <input type=”text” name=”passwd” id=”passwd-2″>
        <button type=”submit”>提交</button>
    </form>
</body>
<script type=”text/javascript”>
    // with() 指定作用域函数。在用于表单时，直接输入表单中的name值，就可以获取该元素的dom
    function validate_required(fieled) {
        with (fieled) {
            if (value == null || value == “”) {
                // 可以做一些提示操作
                alert(“用户的账号、密码不可为空”);
                return false;
            } else {
                return true;
            }
        }
    }
    function validate_form(form) {
        with (form) {
            if (validate_required(name) == false) {
                name.focus();
                return false;
            }
            if (validate_required(passwd) == false) {
                passwd.focus();
                return false;
            }
            alert(“返回true,可以提交表单”);
            return true; // 可以省略
        }
    }
</script>
</html>

应届生前端开发好找工作 35岁前端开发找工作 自学前端开发找工作

» 本文来自：前端开发者 » 《前端开发form表单提交》
» 本文链接地址：https://www.rokub.com/5843.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论