jquery提交表单无效操作无效

Question

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

>

列表项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>

Answer 1

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

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