Redirect to another page in same folder using 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

Your placeholder attributes are redundant. They don't hold any information that is not already in the <label> elements. Nobody benefits from them, and you'll probably find that some screen reader users have to listen to both (which is a waste of their time). You should get rid of them. — Quentin
– Quentin, Commented Feb 11, 2018 at 11:52
This whole thing seems rather pointless. You are asking the user to enter a new password, doing some checks on it to make sure it is OK, and then throwing the user input away to simply navigate to a new URL. What's the point of that? — Quentin
– Quentin, Commented Feb 11, 2018 at 11:53
<br><br> — Since 1996, we have had CSS margins for this sort of thing. — Quentin
– Quentin, Commented Feb 11, 2018 at 11:53
Actually I'm working on a login module, so when the user logs in for the first time he will be directed to this page where he has to change his default password. After changing the password he will be redirected to the main application. — Humble_boy
– Humble_boy, Commented Feb 11, 2018 at 11:55

Ele · Accepted Answer · 2018-02-11 12:06:03Z

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

Quentin · Accepted Answer · 2018-02-11 11:49:07Z

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

Your JavaScript tells the browser to navigate to X
The form submission tells the browser to navigate to Y
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 (i.e. the best practice for this century) would replace the onsubmit attribute with addEventListener and then call the preventDefault method of the event object.

Collectives™ on Stack Overflow

Redirect to another page in same folder using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related