[英]Single click event acts as double click event
I'm using Ajax to submit the login form without refreshing the page. 我正在使用Ajax提交登录表单而不刷新页面。 I've added a function to see whether the data returns 'error' (which comes up when the user enters an incorrect email/password). 我添加了一个函数来查看数据是否返回“错误”(当用户输入不正确的电子邮件/密码时出现)。 If it does not return 'error', the user has been logged in and will be transferred to the page within 2 seconds. 如果未返回“错误”,则表明用户已登录,并将在2秒内转移到该页面。
The problem is that my button acts like a double-click button and I cannot see why. 问题是我的按钮就像双击按钮一样,我看不出原因。 This is my JS file: 这是我的JS文件:
$(function() {
$("#goLogin").click(function() {
$.ajax({
type: "POST",
url: "db-requests/db-login.php",
data: $("#loginForm").serialize(),
success: function(data,textStatus,jqXHR){ finishLogin(data,textStatus,jqXHR); }
});
});
});
function finishLogin( data , textStatus ,jqXHR ) {
if ( data == "error" ) {
$('.errorMsg').fadeIn(500).hide();
$('.succesMsg').fadeOut(300).hide();
} else {
$('.succesMsg').fadeIn(500).show();
$('.errorMsg').fadeOut(300).hide();
setTimeout("location.href = 'protected.php';",2000);
}
}
I've tried placing it between the document_ready tags, but that isn't working either. 我试过将其放在document_ready标记之间,但这也不起作用。
Part of the HTML code: HTML代码的一部分:
<div class="login form">
<div class="login-header">Please Login</div>
<form method="post" id="loginForm" name="form">
<label for="email" class="short">Email*</label>
<input type="text" name="email" id="email" class="required" placeholder="" />
<label for="password" class="short">Password *</label>
<input type="password" name="password" id="password" class="required" placeholder="" maxlength="15" />
</form>
<div id="login-functions">
<div class="loginbtn-container">
<input type="submit" id="goLogin" name="goLogin" class="button green" value="Login" />
</div>
<div class="login form actions">
<p class="register account">Register an account</p>
<p class="request password">Lost your password?</p>
</div>
</div>
</div>
<div class="errorMsg">Incorrect. Please recheck your details</div>
<div class="succesMsg"><b>You've been logged in!</b> Please wait while we transfer you</div>
Please move your submit button inside the form closing tag first 请先将您的提交按钮移至表单结束标记内
<input type="submit" id="goLogin" name="goLogin" class="button green" value="Inloggen" />
The above button is placed after the </form>
tag. 上面的按钮位于</form>
标记之后。
$('.errorMsg').fadeIn(500).hide();
$('.succesMsg').fadeOut(300).hide();
did you mean tto hide both? 你是说把两者都藏起来吗? I see the click
is working fine, though you should ideally do submit
我认为该click
很好,尽管理想情况下您应该submit
Take your submit
inside the form, and prevent normal form submit using preventDefault()
将您的submit
到表单中,并使用preventDefault()
阻止普通表单提交
$("#goLogin").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "db-requests/db-login.php",
data: $("#loginForm").serialize(),
success: function(data,textStatus,jqXHR){ finishLogin(data,textStatus,jqXHR); }
});
});
Because you click on input type submit and progress Ajax on it; 因为您单击输入类型,然后提交并进行Ajax处理; it cause submit 2 times. 它导致提交2次。
To avoid it, you can use as Zach Leighton said above ; 为了避免这种情况,您可以使用上面所说的Zach Leighton; or use as below 或如下使用
$("#goLogin").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "db-requests/db-login.php",
data: $("#loginForm").serialize(),
success: function(data,textStatus,jqXHR){ finishLogin(data,textStatus,jqXHR); }
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.