今天遇到一個坑，想判斷用戶輸入成功後使用jquery移出元素，但是失效，後來發現因爲提交成功後 form表單自動刷新
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="Login.css"/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src=".js"></script>
</head>
<body>
<div id="login">
<h1>first</h1>
<form method="post" onSubmit="return check(this);">
<input type="text" required="required" placeholder="考試密碼" name="first"></input>
<button class="but" type="submit">參與考試</button> </form>
</div>
</body>
</html>
first.js
function check(){
if (form.first.value=="123456"){
$("#login").fadeOut();//讓login移除
return true;
}
return false;
}
解決辦法是去掉form標籤，直接一個框子一個按鈕，就可以了
2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="Login.css"/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="check2.js"></script>
</head>
<body>
<div id="login">
<h1>first</h1>
<input type="text" required="required" placeholder="考試密碼" name="first" id="mytext"></input>
<button class="but" type="submit" οnclick="check2()">參與考試</button>
</div>
</body>
</html>
check2.js
function check2(){
if (document.getElementById("mytext").value=="123456"){
$("#login").fadeOut();//讓login移除
}
else{
document.getElementById("mytext").value="";
}
}