confirm cancel button not working for this simple code-CodePudding

The confirm/cancel button is not working, I don't know what the issue is.

Even after clicking the confirm box cancel it's still directing me to another page.

<html>
    <head>
        <title>password</title>
    </head>
    <body>
        <script type="text/javascript">
            function f() {
                if (myform.password.value == "") {
                    window.alert("you need to enter your password");
                } else {
                    window.confirm("are you sure u want to proceed");
                    window.location =' https://www.facebook.com/';
                }
            }
        </script>
        <center>
            <h1>confirm password page</h1>
            <form id="myform">
                Enter the Password
                <input type="password" id="password" value="">
                <input type="button" id="continue" value ="continue" onclick="f()">
            </center>
        </form>
    </body>
</html>

CodePudding user response：

You can do

if(window.confirm("are you sure u want to proceed")) {
      // Proceed to next page
}

The confirm() method displays a dialog box with a message, an OK button, and a Cancel button.

The confirm() method returns true if the user clicked "OK", otherwise false.

CodePudding user response：

Window.confirm() returns a boolean.

if ok clicked then true.
if cancel clicked then false.

So you have to handle like a if-else block.

if(window.confirm("are you sure u want to proceed")){
// your redirection logic here.
}

CodePudding user response：

The default behavior of form cause the direction to an another page. for preventing that behavior you should use preventDefault() on your form. like:

event.preventDefault();

here is a sample:

https://codepen.io/navab/pen/YzemrWB

CodePudding user response：

just copy-paste my code it will return you back when u press cancel

<html>
    <head>
        <title>password</title>
    </head>
    <body>
        <script type="text/javascript">
            function f() {
                if (myform.password.value == "") {
                    window.alert("you need to enter your password");
                } else {
                    if(window.confirm("are you sure u want to proceed")==true){
                    window.location =' https://www.facebook.com/';}
                    else{
                      window.location.reload();
                    }
                }
            }
        </script>
        <center>
            <h1>confirm password page</h1>
            <form id="myform">
                Enter the Password
                <input type="password" id="password" value="">
                <input type="button" id="continue" value ="continue" onclick="f()">
            </form>
        </center>
    </body>
</html>

CodePudding user response：

I changed it

function f(){
  if(myform.password.value==""){
    window.alert("you need to enter your password");
  }
  else{
    if (window.confirm("are you sure u want to proceed")) {
      window.location =' https://www.facebook.com/';
    }
  }
}

<center>
  <h1>confirm password page </h1>
  <form id="myform">
    Enter the Password<input type="password" id="password" value="">
    <input type="button" id="continue" value ="continue" onclick="f()">
  </form>
</center>