form中 type=button 与 type=submit的表单提交的疑问

问题描述：

1.用button提交为什么提交不了,我调用了submit()方法，但是为什么没有进入action里面的页面
2.直接在表单上加 onsubmit="return check();"，用jq写的时候这个check（）函数应该写在哪
3.关于上面疑问的细节我用注释说明了，搞了大半天还是没有弄清楚，麻烦大神指导指导。不胜感激。
4.check()函数放在$(function(){})外面的时候，当本来该执行里面的return false时，为什么还是提交并进入action里面的页面了呢？

<form id="register" name="register" method="get" action="https://www.baidu.com">
            <input type="text" name="userName" placeholder="用户名" autocomplete="off"/>
            <input type="submit" name="submit" value="注册"/>
            <input type="button" name="show" value="点击"/> 
    </form>
 <script type="text/javascript">
                $(function(){
                    var name = '';
                    $("input[name='userName']").blur(function(){
                        if($(this).val()){
                            name = $(this).val();
                        }
                    });

                    //第一种：button模拟提交 这种为什么提交不了
                    /*$("input[name='show']").click(function(){
                        if(name){
                            $("form#register").submit();
                        }else{
                        alert("无法提交");
                        }
                    })*/

                    //第二种: 表单加上onsubmit="return check();"验证
                    //这个函数写在里面，访问上面的变量，但是直接外部onclick绑定没有进函数
                    function check(){
                        alert("ok"); //直接未进入函数
                        if($("input[name='userName']").val()!=null){
                            //alert("ok"); 
                            return true;
                        }else{
                            //alert("false");
                            return false;
                        }
                    }
                })

                        //这个函数写在外面，外部onclick绑定可以进入该函数，但是无法访问上面已有过控制的变量
            /*function check(){
                //alert("ok"); //进入函数
                if($("input[name='userName']").val()!=null){
                    //alert("ok"); //有输入时，进入
                    return true;
                }else{
                    //alert("false"); //无输入，为什么没有进入
                    return false;
                }
            }*/

答

额,排版乱了,这是代码:

 $(function() {
            var name = '';
            $("input[name='userName']").blur(function() {
                if ($(this).val()) {
                    name = $(this).val();
                }
            });

            //第一种：button模拟提交 这种为什么提交不了
            $("input[name='show']").click(function(){
                if($("input[name='userName']").val()){
                    $("form#register").submit();
                }else{
                    alert("无法提交");
                }
            });
        });

        //这个函数写在外面，外部onclick绑定可以进入该函数，但是无法访问上面已有过控制的变量
        function check(){
            //alert("ok"); //进入函数
            if($("input[name='userName']").val()!=null){
                //alert("ok"); //有输入时，进入
                return true;
            }else{
                //alert("false"); //无输入，为什么没有进入
                return false;
            }
        }

答

把表单贴出来看看呢。

答

不是很理解你的意思,简单把你的代码改了一下:


1.$(fcuntiotn(){})是在页面初始化自动指定的代码:相当于javascript的window.onload=function(){}一般在里面写一些初始化执行的函数,
例如你的blur()函数(初始化时就与对应标签绑定),
2.function check()要写在$(functin(){})外面,因为其并非初始化执行函数

$(function() {
var name = '';
$("input[name='userName']").blur(function() {
if ($(this).val()) {
name = $(this).val();
}
});

        //第一种：button模拟提交 这种为什么提交不了
        $("input[name='show']").click(function(){
            if($("input[name='userName']").val()!=''){
                $("form#register").submit();
            }else{
                alert("无法提交");
            }
        });
    });

    //这个函数写在外面，外部onclick绑定可以进入该函数，但是无法访问上面已有过控制的变量
    function check(){
        //alert("ok"); //进入函数
        if($("input[name='userName']").val()!=null){
            //alert("ok"); //有输入时，进入
            return true;
        }else{
            //alert("false"); //无输入，为什么没有进入
            return false;
        }
    }

希望能帮到你

答

username:

password:


<script type="text/javascript">
    //使用button进行表单的提交
    function form01() {
        //得到form标签
        var form01 = document.getElementById("form01");
        //提交form表单
        form01.submit();
    }
</script>

答

表单提交有三种方式 form中 type=button 与 type=submit这两种用的比较多首先这两种提交方式最好不要同时使用

（1）使用 type=“submit” 如果需要校验则添加 onsubmit="return checkForm();" 不加也可以直接提交

<form method="get" onsubmit="return checkForm();"> username:<input type="text" name="username" id="usernameid"/> <br/> password:<input type="password" name="password" id="passwordid"/> <br/> <input type="submit" value="提交"/> </form> （2）如果要使用button 提交并且做那么你需要得到表单的对象再调用表单的submit方法才行，

username:

password:

答

只有input type=submit或者button标签（没指定过type默认为submit）才会提交表单，触发表单配置的onsubmit验证

input type=button是普通按钮，没有提交表单的功能，你要用这种普通按钮提交表单需要调用表单的submit方法才行，但是注意js条用表单的submit方法不会触发onsubmit事件，需要你自己调用原来onsubmit绑定的代码判断是否验证通过后才调用submit

form中 type=button 与 type=submit的表单提交的疑问

相关推荐