2014-10-01 84 views
0

我试图通过虚拟场景学习JavaScript,下面将不会在活动上下文中使用。所有的html页面都在我的家庭服务器上,这就是为什么我没有在链接中使用http:// etc。如果语句重定向不能按预期工作

我试图让下面的代码带我到“索引”页面,如果我输入正确的用户名和密码,并保持在“主页”页面,如果我输入它不正确,但与警告声明“无效登录”。如果输入正确的用户名和密码,我会正确重定向但是如果我在正确触发警报后输入错误的用户名/密码,我也会重定向到索引页。

如何停止索引页面加载错误的用户名/密码?我敢肯定,它可能是简单的我很想念!

这是网页

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css.css"> 
</head> 
<body> 
<div id="container"> 

<div id="loginbox"> 
<form id="login" action="home.html"> 
Username: <input type="text" name="user" id="user"><br> 
Password: &nbsp;<input type="password" name="password" id="password"><br> 
<input type="submit" value="Login" onclick="checkUserName()"> 
</form> 

</div> 
</div> 

的HTML,这是脚本

function checkUserName() { 
var User = document.getElementById("user").value; 
var Password = document.getElementById("password").value; 

if (User === "user123" && Password === "password123") { 
    window.location = "index.html"; 
} 
else { 
    alert("Invalid Login"); 
} 
} 

干杯!

+0

您将您的按钮声明为提交类型。这就是导致这种行为的原因。将输入替换为

+1

您刚刚提交了表单。 'onclick =“checkUserName();返回false”'。或者使用非突兀的技术 – CodingIntrigue 2014-10-01 11:33:00

回答

0

你不想在这种情况下提交表格。您只需在点击登录时调用js函数。所以使用一个正常的按钮,而不是提交。

<button onclick="checkUserName()">login</button> 

当你使用一个提交按钮,表单将得到提交的,除非你不阻止默认动作通过e.preventDefault()或从js函数返回false被称为

function checkUserName() { 
 
var User = document.getElementById("user").value; 
 
var Password = document.getElementById("password").value; 
 

 
if (User === "user123" && Password === "password123") { 
 
    window.location = "index.html"; 
 
} 
 
else { 
 
    alert("Invalid Login"); 
 
} 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="css.css"> 
 
</head> 
 
<body> 
 
<div id="container"> 
 

 
<div id="loginbox"> 
 
<form id="login" action="home.html"> 
 
Username: <input type="text" name="user" id="user"><br> 
 
Password: &nbsp;<input type="password" name="password" id="password"><br> 
 
<button onclick="checkUserName()">login</button> 
 
</form> 
 

 
</div> 
 
</div>