Issue redirecting to a new page in Javascript
Question
I am new to JavaScript and am trying to compare two input fields before going to another page. The goals is that when a button is clicked the text from two input fields is compared and then the page is redirected to another page. I have tried using window.location.href as well as window.location.replace but so far nothing has worked. The redirect should be executed because the alert in the same block of logic is being executed. Thank you for any help.
<html>
<head>
<script type="text/javascript">
function sub(){
if(document.getElementById("p1").value == document.getElementById("p2").value){
alert("success");
window.location.replace="http://localhost:8080/newUser.php";
} else {
alert("Password do not match");
}
}
</script>
</head>
<body>
<form onSubmit="sub()" method="post">
Password: <input type="text" id="p1" name="password"><br>
Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
<input type="submit">
</form>
</body>
</html>
5 answers
solution1
1 ACCPTED 2016-06-09 16:18:16
Here is how you can do it. You must return false in your function to prevent your form to be posted; now you have onsubmit="return sub();" in your form.
<html> <head> <script type="text/javascript"> function sub(){ if(document.getElementById("p1").value == document.getElementById("p2").value){ alert("success"); window.location.href= "http://localhost:8080/newUser.php"; } else { alert("Password do not match"); } return false; // IMPORTANT RETURN STATEMENT } </script> </head> <body> <form onSubmit="return sub();" method=""> Password: <input type="text" id="p1" name="password"><br> Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br> <input type="submit"> </form> </body> </html>
Now if you want to post the typed parameters (password and passwordConfirm) to this page then @musicfuel's answer is almost correct, you should just add onsubmit="return sub();" instead of onsubmit="sub()"
solution2
1 2016-06-09 16:21:17
Your are submitting the form and then the page reloads. The trick is to prevent the default action like so:
<form onSubmit="event.preventDefault(); sub();" method="post">
Password: <input type="text" id="p1" name="password"><br>
Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
<input type="submit">
</form>
Note the onSubmit attribute's content:
event.preventDefault();
EDIT:
Thinking more closely about it though. It looks like you want to implement some kind of front end validation to be able to stop the form action in case the passwords don't match. In this case I think a better idea would be to disable the button until the password are matching, or something equivalent. Or simply just run event.preventDefault() if the passwords don't match and just proceed with posting the form when they do match.
function sub(e){
if(document.getElementById("p1").value !== document.getElementById("p2").value){
e.preventDefault();
alert("Password do not match");
}
}
And the form like so:
<form onSubmit="sub(event);" method="post" action="foo.php">
Password: <input type="text" id="p1" name="password"><br>
Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
<input type="submit">
</form>
solution3
0 2016-06-09 16:14:02
What @Teddy said is correct. Use either document.location or document.location.href. You're bigger problem is that the onSubmit handler of your form is passing following your call and executing the POST to the same page you are on, likely making look like you are going nowhere. It appears that your onSubmit is meant to be a validation check. A more traditional method to do this is as follows:
<html>
<head>
<script type="text/javascript">
function sub() {
if (document.getElementById("p1").value != document.getElementById("p2").value) {
return false;
}
alert("success");
return true;
}
</script>
</head>
<body>
<form onSubmit="sub()" method="post" action="http://localhost:8080/newUser.php">
Password: <input type="text" id="p1" name="password"><br>
Confirm Password: <input type="text" id="p2" name="passwordConfirm"> <br>
<input type="submit">
</form>
</body>
</html>
The form's action controls the actual destination on success per normal HTML behavior. The onSubmit function is responsible for returning false on validation failure or true (or nothing for that matter) on success. The return of false informs the document that something is wrong and prevents the navigation.
solution4
0 2016-06-09 16:18:22
Using window.location="http://localhost:8080/newUser.php"; should be enough to redirect. Are you sure your path is correct? ie Are there additional subdirectories to be included in the path? window.location.replace="http://localhost:8080/folder/newUser.php";
solution5
0 2016-06-09 16:25:01
The simplest way is to use window.confirm(). It's like alert() but it has 2 buttons: OK and Cancel. It returns true if the user pressed OK and returns false if the user pressed Cancel.
if (window.confirm('Success')) {
window.location.href='http://localhost:8080/newUser.php';
}else{
alert("Password do not match");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.