标题

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（）; 开关（this.id）{ 案例“登录表单”： 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'），“错误”，“ glyphicon-删除”，“登录错误”）; }其他{ msgChange（$（'＃div-login-msg'），$（'＃icon-login-msg'），$（'＃text-login-msg'），“成功”，“ glyphicon-ok”，“登录好”）; } 返回false；打破; 情况“丢失形式”： var $ ls_email = $（'＃lost_email'）。val（）; 如果（$ ls_email ==“ ERROR”）{ msgChange（$（'＃div-lost-msg'），$（'＃icon-lost-msg'），$（'＃text-lost-msg'），“错误”，“ glyphicon-删除”，“发送错误”）; }其他{ msgChange（$（'＃div-lost-msg'），$（'＃icon-lost-msg'），$（'＃text-lost-msg'），“成功”，“ glyphicon-ok”，“发送好”）; } 返回false；打破; 案例“注册表”： 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'），“错误”，“ glyphicon-删除”，“注册错误”）; }其他{ msgChange（$（'＃div-register-msg'），$（'＃icon-register-msg'），$（'＃text-register-msg'），“成功”，“ glyphicon-ok”，“注册好”）; } 返回false；打破; 默认：返回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();
    ...
}

jQuery提交表单不起作用操作不起作用

标题

1 个答案: