Question

我对模态很陌生（老实说，webdev一般）。我怀疑这与我的$('#login-modal').submit();

有关

我有一个登录模式：

    <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="loginmodal-container">
                <img src="awslogo.png" alt="" width="80%">
                <form>
                    <input id="awsu" type="text" name="user" placeholder="Username">
                    <input id="awsp" type="password" name="pass" placeholder="Password">
                    <input id="aws-submit" type="submit" name="login" class="form-control login loginmodal-submit" value="Login">
                </form>
            </div>
        </div>
    </div>

我在这里用js显示它：

this.ctrlNext.addEventListener( 'click', function( ev ) { 
            ev.preventDefault();
            console.log(self.current);
            // display authentication
            if (self.current === 0){
                $('#login-modal').modal('show');
                var awsu = document.getElementById("awsu").value;
                var awsp = document.getElementById("awsp").value;
                console.log(awsu);
                console.log(awsp);
            }

这会弹出一个不错的小登录模式：

我遇到的问题我怀疑当我点击登录时会发生什么：

$('#aws-submit').click(function( ev ) {
            //ev.preventDefault();
            console.log("clicked a");
            $('#login-modal').submit();
        });

我试过了ev.preventDefault();，但这只是让模式保持整个时间。也许我需要$('#login-modal').modal('hide');在这里，并以某种方式从表单中获取数据？

忍者编辑 - 尝试了$('#login-modal').modal('hide');它似乎有效，但如果我正在做这个＆＃34;对＆＃34;我没有世俗的想法。方式，以及如何正确获取价值。

Answer 1

试试ev.stopPropagation();。

您也可以从处理程序return false;停止事件传播。

Answer 2

提交表单时，会将其内容提交到action属性。如果未设置action属性，则会提交给自己。

ev.preventDefault();阻止表单以正常方式提交，并且在这种情况下是您需要的。正如您所指出的那样，它将模态留在屏幕上，这是因为它停止了页面刷新。并且如你所想的那样摆脱你使用$('#login-modal').modal('hide');的模态。

要获取数据，您可以序列化表单内容。

为表单提供ID <form id="login_form">

使用$('#login_form').serialize();序列化数据，然后您可以使用ajax将数据发布到服务器。

如何防止我的登录模式在提交时刷新我的网站？

2 个答案: