CODEWITHSUNDEEP
javascripthtml
Oliv
Oliv

Reputation: 153

How to stay on the same page without refreshing after the user cancels leaving?

I have a webpage test.php with:

I would like the user to confirm that (s)he wants to leave before redirecting. Here is my code so far:

function confirmation(){
  var result = confirm("Do you really want to leave this page?");
  if(result){
    window.location = 'leave.php';
  }
  else{
    return FALSE;
  }
}
		

<form method="post" action="test.php">
     <input type="text" name="answer" id="answer" placeholder="Type your answer here">
     <input type="submit" name="submit_answer" value="Submit your answer">
     <input type="submit" name="leave" value="Leave this page" onClick="return confirmation();">
</form>

I have two problems:

  1. The code does not redirect to leave.php when the user confirms that (s)he wants to leave, but it refreshes the current page. How can I fix that?
  2. When the user selects Cancel in the confirmation box, the page test.php is reloaded and the data is lost: that is, the textbox is empty even if the user wrote something before clicking on Leave. Is there a way to avoid that?

Upvotes: 0

Views: 727

Answers (3)

K. Tippenhauer
K. Tippenhauer

Reputation: 326

If you have to Submit-Buttons each of them will submit your form. So you've got a conflict between the redirection to "test.php" and "leave.php". In this case, the action from the form comes always first.

function confirmation(){
    var result = confirm("Do you really want to leave this page?");
    if(result){
        window.location = 'leave.php';
    }
    else{
        return FALSE;
    }
}
		

<form method="post" action="test.php">
     <input type="text" name="answer" id="answer" placeholder="Type your answer here">
     <input type="submit" name="submit_answer" value="Submit your answer">
     <input type="button" name="leave" value="Leave this page" onClick="return confirmation();">
</form>

Upvotes: 1

user9189147
user9189147

Reputation: 296

Here is a working version. I believe the issue was with the return statement, "return confirmation()":

<form method="post" action="test.php">
     <input type="text" name="answer" id="answer" placeholder="Type your answer here">
     <input type="submit" name="submit_answer" value="Submit your answer">
     <input type="submit" name="leave" value="Leave this page" onClick="confirmation(); return false;">
</form>
<script>
  function confirmation(e){
      var result = confirm("Do you really want to leave this page?");
      if (result) {
        window.location = '/leave.php';
      } else {
          return FALSE;
      }
  }
</script>

Upvotes: 1

mhatch
mhatch

Reputation: 4605

You can submit the form using JavaScript. First, change both buttons to type="button". Using type="submit" submits your button causing your errors. Then write a simple function to submit the form.

function confirmation(){
  var result = confirm("Do you really want to leave this page?");
  if(result){
    window.location = 'leave.php';
  }
  else{
    return FALSE;
  }
}

function submitForm(){
  var form = document.getElementById('form');
  form.submit();
}
<form id="form" method="post" action="test.php">
     <input type="text" name="answer" id="answer" placeholder="Type your answer here">
     <input type="button" name="submit_answer" value="Submit your answer" onClick="submitForm()">
     <input type="button" name="leave" value="Leave this page" onClick="return confirmation();">
</form>

Upvotes: 2

Related Questions