onclick从表单返回输入而不是重定向
[英]onclick returns input from form instead of redirecting
问题描述
I am just learning JS and I am trying to navigate to a different page based on the input from the user. 
我正在学习JS，我试图根据用户的输入导航到不同的页面。 /MenuDemo1/src/home.jsp
In the above the two text boxes are coming and after I enter the values and click on the button, I am successful in getting the uid and pwd but on click instead of the url in location.href, it is going to MenuDemo1/src/home.jsp?username=admin&password=admin. 在上面两个文本框即将到来，在我输入值并单击按钮后，我成功获取了uid和pwd，但是在MenuDemo1/src/home.jsp?username=admin&password=admin.点击而不是url，它将转到MenuDemo1/src/home.jsp?username=admin&password=admin.
<form name="form1" id="form1" >
First name: <input type="text" name="username"> <br> Last
name: <input type="password" name="password"> <br>
<button id="submit" onclick="validateform()">Submit</button>
</form>
<script>
var linkHome;
function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
}
</script>
Can someone please point it out what I am missing? 有人可以指出我错过了什么吗？ TIA. TIA。
3 个解决方案
解决方案1
1 已采纳 2017-05-20 16:36:09
You have to attach the function to your submit for event : because onclick will not trigger the reirection : 您必须将该函数附加到您的提交事件：因为onclick不会触发重定向：
so first remove the onclick="validateform()" and then assign the function to the submit event and put return false; 所以首先删除onclick="validateform()" ，然后将该函数分配给submit事件并return false; to prevent send form to the post url ; 防止发送表格到帖子网址;
js should look like belllow : js应该看起来像belllow：
var linkHome;
document.getElementById("form1").onsubmit = function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
return false;
}
解决方案2
0 2017-05-20 16:06:48
My answer may not be correct, I am 11 and started programming about 9 months ago, so I am a noob. 我的回答可能不正确，我11岁并且大约9个月前开始编程，所以我是一个菜鸟。 But I believe it is not working because you have no paragraph to where the data can be sent to, so when I ran the program and did this edit it worked.`' 但是我认为它没有用，因为你没有可以发送数据的段落，所以当我运行程序并进行编辑时，它起作用了。
Also i believe there is no page such as "/MenuDemo1/src/adminHome.jsp" to go to 另外我相信没有“/MenuDemo1/src/adminHome.jsp”这样的页面去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<form name="form1" id="form1" >
First name: <input type="text" name="username"> <br> Last
name: <input type="password" name="password"> <br>
<button id="submit" onclick="validateform()">Submit</button>
</form>
<p id="demo1"></p>
<script>
var linkHome;
function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
}
</script>
<link rel="stylesheet" href="style.css">
</head>
<body >
</body>
</html>`
解决方案3
0 2017-05-20 16:27:02
You should try this :- 你应该试试这个： -
linkHome = window.location.protocol + "//" + window.location.host + "MenuDemo1/src/adminHome.jsp";
and 和
linkHome = window.location.protocol + "//" + window.location.host + "MenuDemo1/src/userHome.jsp";
Hope this helps! 希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.