我对模态很陌生(老实说,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;我没有世俗的想法。方式,以及如何正确获取价值。
答案 0 :(得分:1)
试试ev.stopPropagation();
。
您也可以从处理程序return false;
停止事件传播。
答案 1 :(得分:1)
提交表单时,会将其内容提交到action
属性。如果未设置action
属性,则会提交给自己。
ev.preventDefault();
阻止表单以正常方式提交,并且在这种情况下是您需要的。正如您所指出的那样,它将模态留在屏幕上,这是因为它停止了页面刷新。并且如你所想的那样摆脱你使用$('#login-modal').modal('hide');
的模态。
要获取数据,您可以序列化表单内容。
为表单提供ID <form id="login_form">
使用$('#login_form').serialize();
序列化数据,然后您可以使用ajax将数据发布到服务器。