Onclick returns data from form instead of redirect
I am just learning JS and I am trying to navigate to another page based on user input. /MenuDemo1/src/home.jsp
In the above example two textboxes appear, after entering values and clicking the button, I manage to get the uid and pwd, but on click instead of the url in location.href, it will be 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 out what I am missing? TIA.
source to share
You need to attach a function to your dispatch for the event: because onclick doesn't trigger a redirect:
so first remove onclick="validateform()"
and then assign the function to the submit event and place return false;
to prevent the form from submitting to the post address;
js should look like a bell:
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;
}
source to share
My answer may not be correct, I am 11 years old and started programming about 9 months ago, so I noob. But I believe it doesn't work because you don't have a paragraph to send data to, so when I ran the program and did this edit, it worked. ''
Also I believe there is no page like "/MenuDemo1/src/adminHome.jsp" to go to
<!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>`
source to share