Javascript confirm box, click cancel not working, page still load

Question

I have a project use confirm box javascript, if user click cancel and then do nothing but page still load, i search all about confirm box and i can't find what i looking for, please help me with this, here some code

javascript

function OnClickNextPage(){
  var result = confirm("Are you sure ?");
  if (!result) {
  return false;
   }
 }

html

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="return OnClickNextPage();">Test</a>

Thank you

You'll need to prevent the default action of the click event, something like `event.preventDefault();`. — Titus, Dec 03 '19 at 10:27
@Titus I have tried it before but page still load , do you have other way to solve this ?? — Tuan Pham, Dec 03 '19 at 10:30
https://stackoverflow.com/questions/866583/how-to-cancel-navigation-when-user-clicks-a-link-a-element — Attersson, Dec 03 '19 at 10:34

Abhinav · Answer 1 · 2019-12-03T11:18:06.110

1

try

  function OnClickNextPage(e){

e.preventDefault();
     var result = confirm("Are you sure ?");
      if (!result) {
      return false;
       }
     }

Edit --

Sorry My bad, problem is you are calling page load event in href which eventually fire on priority of DOM

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="OnClickNextPage();">Test</a>

Try like this

 <a href="#" onclick="OnClickNextPage();">Test</a>

function OnClickNextPage(e){

   e.preventDefault();
    var result = confirm("Are you sure ?");
      if (!result) {
        return false;
      } else {
         window.location.href = [[Your URL Here]]
      }
 }

edited Dec 03 '19 at 11:18

answered Dec 03 '19 at 10:29

Abhinav

1,202
1
8
12

1

As it is, this doesn't answer the question, since in the original code, the event object is not passed. Also if a user clicks OK in the confirm box, the function is not supposed to prevent the default action. – Teemu Dec 03 '19 at 10:31
@user7417866 this answer not work for me, page still load :(( – Tuan Pham Dec 03 '19 at 10:51
@TuấnPhạm Try Edited Solution – Abhinav Dec 03 '19 at 11:19

score 1 · Answer 2 · answered Dec 03 '19 at 10:35

Instead of returning false you have to prevent the default beahaviour of the event with preventDefault() function. Here is the code

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="OnClickNextPage();">Test</a>

function OnClickNextPage(event){
  var result = confirm("Are you sure ?");
  if (!result) {
     event.preventDefault();
   }
 }

score 1 · Answer 3 · answered Dec 03 '19 at 10:46

You have to "terminate" the click event to the a tag, to do this, you have pass the event object to OnClickNextPage function, then call .preventDefault() on the event. return false; action does not affect to onclick event.

HTML

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="OnClickNextPage(event);">Test</a>

Javascript

function OnClickNextPage(event) {
  var result = confirm("Are you sure ?");
  if (!result) {
    event.preventDefault(); // prevent event when user cancel
  }
  // go to page in a tag's href when user choose 'OK'
}

Damodhar · Answer 4 · 2019-12-03T11:01:05.530

0

JS

  function OnClickNextPage(e){

          console.log('after prevent')
          var result = confirm("Are you sure ?");
          if (!result) {
e.preventDefault();
            return false;
           }
         }

HTML

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="return OnClickNextPage(event);">Test</a>

edited Dec 03 '19 at 11:01

answered Dec 03 '19 at 10:35

Damodhar

1,219
8
17

tks but this answer still not working, page still load if click cancel – Tuan Pham Dec 03 '19 at 10:53
you need to check the result and then take action accordingly. – Damodhar Dec 03 '19 at 10:57

Javascript confirm box, click cancel not working, page still load

4 Answers4