CODEWITHSUNDEEP
javascripthtmlformsjsp
Atreyee Roy
Atreyee Roy

Reputation: 45

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. /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.

<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.

Upvotes: 2

Views: 53

Answers (3)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

You have to attach the function to your submit for event : because onclick will not trigger the reirection :

so first remove the onclick="validateform()" and then assign the function to the submit event and put return false; to prevent send form to the post url ;

js should look like 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;
}

Upvotes: 1

Naman Sancheti
Naman Sancheti

Reputation: 565

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!

Upvotes: 0

HyperMonkey
HyperMonkey

Reputation: 115

My answer may not be correct, I am 11 and started programming about 9 months ago, so I am a noob. 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 

 <!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>`

Upvotes: 0

Related Questions