使用javascript重定向到同一文件夹中的另一个页面

Question

I'm working on a change password page. In this page the user enters the new password and confirms the new password. If both the passwords are not matching it should be in the same page. If the passwords match, then the user gets directed to another page. I have tried all methods to redirect the page , but it is not happening. Please help !

function f1()
{
        var newpass = document.getElementById('npass').value;
        var confirmpass = document.getElementById('cpass').value;

        if(newpass!=confirmpass)
        {
            document.getElementById('npass').value = "";
            document.getElementById('cpass').value = "";
            alert("Password Mismatch. Please enter again!");

           //window.location.href = "/file.html";
           // window.location = 'file.html';
           // window.location.replace('file.html');
           //window.location.assign("file.html");
            //window.location.href = "file.html";
        }
        else
        {
            alert("Password Match");


         //   window.location.href= "/file.html";


        // document.write("check");

        }
    }

 </script>



<form method="POST" onsubmit="f1()">

<label for="npass">New Password:</label>
<input type="password" id="npass" placeholder="Enter New Password" 
name="newpassword" required="required" size="8">

<label for="cpass">Confirm Password:</label>
<input type="password" id="cpass" placeholder="Confirm New Password" 
name="cpass" required="required" size="8"><br><br>
<input type="submit" class="btn btn-info" name="submit" value="Submit">
</form>

The alert boxes are working but the page redirect is not happening. I have tried all the redirect methods as shown in the code. But still not working. New to javascript. Please help

Answer 1

You are calling the function in the submit event of the form so this happens:

1. Your JavaScript tells the browser to navigate to X
2. The form submission tells the browser to navigate to Y
3. The browser navigates to Y

You need to prevent the default behaviour of the form submission to allow the navigation in step 1 to be followed through on.

Using an intrinsic event attribute, you need to return false; at the end of your onsubmit function. That could be by returning the return value of f1 and then returning false from there, or a second statement in the function.

---

A modern approach (ie the best practice for this century) would replace the onsubmit attribute with addEventListener and then call the preventDefault method of the event object.

Answer 2

In your approach just returning false will help. This way you're avoiding the form submission.

 function f1() { var newpass = document.getElementById('npass').value; var confirmpass = document.getElementById('cpass').value; if (newpass != confirmpass) { document.getElementById('npass').value = ""; document.getElementById('cpass').value = ""; alert("Password Mismatch. Please enter again!"); //window.location.href = "/file.html"; // window.location = 'file.html'; // window.location.replace('file.html'); //window.location.assign("file.html"); //window.location.href = "file.html"; } else { alert("Password Match"); // window.location.href= "/file.html"; // document.write("check"); } return false; } 

 <form method="POST" onsubmit="return f1()"> <label for="npass">New Password:</label> <input type="password" id="npass" placeholder="Enter New Password" name="newpassword" required="required" size="8"> <label for="cpass">Confirm Password:</label> <input type="password" id="cpass" placeholder="Confirm New Password" name="cpass" required="required" size="8"><br><br> <input type="submit" class="btn btn-info" name="submit" value="Submit"> </form> 

On the other hand, if you have the control to redirect the user, why to use a form element. Do you want the default form validations? maybe! if that's not the case, you can remove the form element and bind a click event to your button.

 function f1() { var newpass = document.getElementById('npass').value; var confirmpass = document.getElementById('cpass').value; if (newpass.trim() === '') { alert("Password is required."); return; } if (confirmpass.trim() === '') { alert("Password confirmation is required."); return; } if (newpass != confirmpass) { document.getElementById('npass').value = ""; document.getElementById('cpass').value = ""; alert("Password Mismatch. Please enter again!"); //window.location.href = "/file.html"; // window.location = 'file.html'; // window.location.replace('file.html'); //window.location.assign("file.html"); //window.location.href = "file.html"; } else { alert("Password Match"); // window.location.href= "/file.html"; // document.write("check"); } } document.querySelector('.btn').addEventListener('click', f1) 

 <label for="npass">New Password:</label> <input type="password" id="npass" placeholder="Enter New Password" name="newpassword" required="required" size="8"> <label for="cpass">Confirm Password:</label> <input type="password" id="cpass" placeholder="Confirm New Password" name="cpass" required="required" size="8"><br><br> <input type="submit" class="btn btn-info" name="submit" value="Submit">