提问者:小点点

jquery提交表单无效操作无效


我正在尝试为我的登录构建一个提交表单,但我不知道为什么这个操作不起作用。有什么想法吗?

>

  • 列表项jquery

    $(function() {
    
    var $formLogin = $('#login-form');
    var $formLost = $('#lost-form');
    var $formRegister = $('#register-form');
    var $divForms = $('#div-forms');
    var $modalAnimateTime = 300;
    var $msgAnimateTime = 150;
    var $msgShowTime = 2000;
    

    $(“Form”).Submit(函数(e){e.PreventDefault();switch(this.id){case“login-form”:var$lg_username=$('#login_username').val();var$lg_password=$('#login_password').val();如果($lg_username==“error”){msgChange($('#div-login-msg'),$('#icon-login-msg'),$('#text-login-msg'),“error”,“glyphicon-remove”,“login error”);}else{msgChange($('#div-login-msg'),$('#icon-login-msg'),$('#text-login-msg'),$('#text-login-msg'),断裂;大小写“lost-form”:var$ls_email=$('#lost_email').val();如果($ls_email==“error”){msgChange($('#div-lost-msg'),$('#icon-lost-msg'),$('#text-lost-msg'),“glyphicon-remove”,“send error”);}else{msgChange($('#div-lost-msg'),$('#icon-lost-msg'),$('#text-lost-msg'),$('#text-lost-msg'),$('#text-lost-msg')断裂;大小写“register-form”:var$rg_username=$('#register_username').val();var$rg_email=$('#register_email').val();var$rg_password=$('#register_password').val();如果($rg_username==“error”){msgChange($('#div-register-msg'),$('#icon-register-msg'),$('#text-register-msg'),“error”,“glyphicon-remove”,“register error”);}else{msgChange($('#div-register-msg'),$('#icon-register-msg'),$('#text-register-msg'),$('#text-register-msg'),断裂;默认:返回false;}返回false;});

    $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
    $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
    $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
    $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
    $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
    $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
    
    function modalAnimate ($oldForm, $newForm) {
        var $oldH = $oldForm.height();
        var $newH = $newForm.height();
        $divForms.css("height",$oldH);
        $oldForm.fadeToggle($modalAnimateTime, function(){
            $divForms.animate({height: $newH}, $modalAnimateTime, function(){
                $newForm.fadeToggle($modalAnimateTime);
            });
        });
    }
    
    function msgFade ($msgId, $msgText) {
        $msgId.fadeOut($msgAnimateTime, function() {
            $(this).text($msgText).fadeIn($msgAnimateTime);
        });
    }
    
    function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
        var $msgOld = $divTag.text();
        msgFade($textTag, $msgText);
        $divTag.addClass($divClass);
        $iconTag.removeClass("glyphicon-chevron-right");
        $iconTag.addClass($iconClass + " " + $divClass);
        setTimeout(function() {
            msgFade($textTag, $msgOld);
            $divTag.removeClass($divClass);
            $iconTag.addClass("glyphicon-chevron-right");
            $iconTag.removeClass($iconClass + " " + $divClass);
        }, $msgShowTime);
    }
    

    });

    列表项html

                <!-- Begin # DIV Form -->
                <div id="div-forms">
    
                    <!-- Begin # Login Form -->
                    <form id="login-form" method="post" action="login.php">
                        <div class="modal-body">
                            <div id="div-login-msg">
                                <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-login-msg">Type your username and password.</span>
                            </div>
                            <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
                            <input id="login_password" class="form-control" type="password" placeholder="Password" required>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Remember me
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div>
                                <button type="submit" name="login" class="btn btn-primary btn-lg btn-block">Login</button>
                            </div>
                            <div>
                                <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
                                <button id="login_register_btn" type="button" class="btn btn-link">Register</button>
                            </div>
                        </div>
                    </form>
                    <!-- End # Login Form -->
    
                    <!-- Begin | Lost Password Form -->
                    <form id="lost-form" style="display:none;" method="post" action="submit.php">
                        <div class="modal-body">
                            <div id="div-lost-msg">
                                <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-lost-msg">Type your e-mail.</span>
                            </div>
                            <input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
                        </div>
                        <div class="modal-footer">
                            <div>
                                <button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Send</button>
                            </div>
                            <div>
                                <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
                                <button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
                            </div>
                        </div>
                    </form>
                    <!-- End | Lost Password Form -->
    
                    <!-- Begin | Register Form -->
                    <form id="register-form" style="display:none;" method="post" action="submit.php">
                        <div class="modal-body">
                            <div id="div-register-msg">
                                <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-register-msg">Register an account.</span>
                            </div>
                            <input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
                            <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
                            <input id="register_password" class="form-control" type="password" placeholder="Password" required>
                        </div>
                        <div class="modal-footer">
                            <div>
                                <button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Register</button>
                            </div>
                            <div>
                                <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
                                <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
                            </div>
                        </div>
                    </form>
                    <!-- End | Register Form -->
    
                </div>
                <!-- End # DIV Form -->
    
            </div>
        </div>
    </div>
    

  • 共1个答案

    匿名用户

    在运行自定义代码之前,必须阻止表单首先提交,否则表单将在代码运行之前提交。这可以通过使用e.preventdefault()来完成。例如:

    $("form").submit(function (e) {
        e.preventDefault();
        ...
    }