單擊事件充當雙擊事件

我使用Ajax在不刷新頁面的情況下提交登錄表單。我添加了一個函數來查看數據是否返回「錯誤」（當用戶輸入不正確的電子郵件/密碼時出現）。如果它沒有返回'錯誤'，用戶已經登錄並將在2秒內轉移到頁面。單擊事件充當雙擊事件

問題是，我的按鈕就像一個雙擊按鈕，我看不出爲什麼。這是我的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); 
    } 

}

我試過把它放在document_ready標籤之間，但這也不起作用。 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>

來源

2014-03-06 danzerr

我們可以看到HTML代碼嗎？ –

@ Aurel300我的不好。我只是更新了我的文章:) – danzerr

而不是onclick使用$（表單）.onSubmit（）並防止默認 –

$('.errorMsg').fadeIn(500).hide(); 
$('.succesMsg').fadeOut(300).hide();

你是不是說要同時隱藏？我看到click工作正常，但您應做的submit

把你的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); } 
    }); 

});

來源

2014-03-06 03:12:52 sabithpocker

我覺得自己像個笨蛋。當然，我並不是想把它們都隱藏起來。將errorMsg從.hide（）更改爲.show（），現在它工作正常。哦，天哪..謝謝大聲笑！ – danzerr

請移動你的提交表單結束標記第一

<input type="submit" id="goLogin" name="goLogin" class="button green" value="Inloggen" />

以上按鍵被安置在</form>標籤後，裏面按鈕。

來源

2014-03-06 03:11:43 HackerKarma

因爲你點擊輸入型提交和進度阿賈克斯它;它會導致提交2次。

爲了避免它，你可以使用上面說的Zach Leighton;或使用如下

$("#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); } 
     }); 
    });

來源

2014-03-06 03:13:38 fanfan1609

請嘗試將提交按鈕從表單中刪除 – fanfan1609

單擊事件充當雙擊事件

回答

相關問題