即使當.submit（）返回false時，Submit按鈕也會刷新頁面

Question

我正在創建一個不需要頁面刷新的論壇。它正在流行，除非登錄嘗試失敗，頁面重新加載。

我已經完成了所有的搜索結果，並發現我的jQuery「返回false」對.submit事件應該防止重新加載，但它不！下面是代碼：

HTML：

<div id='sidebar'> 
<p>Login</p> 
<form id='login'> 
    <input class='logininfotext' type='text' id='login_username' placeholder='username'/> 
    </br> 
    <input class='logininfotext' type='password' id='login_password' placeholder='password'/> 
    </br> 
    <input name='loginbutton' type='submit' value='login'/> 
</form> 
</div> 

CSS：

#sidebar { 
    font-size: 12px; 
    position: fixed; 
    color: white; 
    top: 227px; 
    left: 90%; 
    width: 9.5%; 
    background-color: rgba(12,35,44,0.6); 
    border: 2px solid #3D89A4; 
    font-family: Minecraft; 
}  
.logininfotext { 
    width: 100px; 
} 
.error { 
    padding: 6px; 
    border: 1px solid rgba(123, 29, 29, 0.7); 
    border-radius: 4px; 
background-color: rgba(245, 83, 83, 0.5); 
font-size: 10px; 
color: #916E6E; 
} 

的JavaScript/JQuery的：

//saves all userdata of current session to the user object. 
function saveuserdata() { 
    var session_user_data = JSON.parse(get_data("#sidebar", "php/sqlquery.php", "session_user_data")); 
    user.username=session_user_data[0]; 
    user.password=session_user_data[1]; 
    var session_user_data2=JSON.parse(get_data("#sidebar", 'php/sqlquery.php', 'Userdata', user.username)); 
    user.picture=session_user_data2[0]['Picture']; 
    user.posts=session_user_data2[0]['Posts']; 

//reprints the login form, supposedly adding whatever html to the end I want for error support 
function loginform(extrastring) { 
    var loginform = "<p>Login</p><form id='login'><input class='logininfotext' type='text' id='login_username' placeholder='username'/></br>"; 
    loginform += "<input class='logininfotext' type='password' id='login_password' placeholder='password'/></br><input id='loginbutton' type='submit' value='login'></form>"; 
    if (typeof(extrastring)=='string') { 
    loginform += extrastring; 
    } 
    $("#sidebar").html(loginform); 
} 

$('#sidebar').submit(function() { 
    var test=true //normally, this would be a call to php to check if the user logged in successfully or not. I know my php is working, but my problem is I don't want the page reloading 
    user.username=$('#login_username').val(); 
    user.password=$('#login_password').val(); 
    if (test=true) { 
     saveuserdata(); 
     $("#sidebar").html("<p class='username'>"+user.username+"</p><img width='125px' height='125px' src='"+user.picture+"'/><p>Posts: "+user.posts+"</td><div id='logout'>logout</div>"); 
    } else { 
     loginform("<p class='error'>Username or Password incorrect!</p>"); 
    } 
    return false; 
}); 

幫助深表感謝。我意識到很難弄清楚這裏發生了什麼。如果你想看到完整的東西，是我的客人：http://lampitosgames.com/forum/index.php

Answer 1

嘗試了preventDefault而不是

$('#sidebar').submit(function(e) { 
    e.preventDefault(); 
    var test=true //normally, this would be a call to php to check if the user logged in successfully or not. I know my php is working, but my problem is I don't want the page reloading 
    user.username=$('#login_username').val(); 
    user.password=$('#login_password').val(); 
    if (test=true) { 
     saveuserdata(); 
     $("#sidebar").html("<p class='username'>"+user.username+"</p><img width='125px' height='125px' src='"+user.picture+"'/><p>Posts: "+user.posts+"</td><div id='logout'>logout</div>"); 
    } else { 
     loginform("<p class='error'>Username or Password incorrect!</p>"); 
    } 
});