Jquery AJAX submits the form even if confirm() method is false

Question

<div class="report" data-id="55"></div>

<script>
$('.report').click(function() {
    var id = $(this).data("id");
    confirm("do you really want to report this post?");

    $.ajax({
        url: 'forumreport.php',
        type: 'GET',
        data: 'id='+id,
        success: function(){
            alert("reported!!");
        },
    });
})
</script>

I want to stop $.ajax() method if user clicks cancel on confirm form. However ajax is still sending the id to .php page. What should i do?

Answer 1

The confirm method returns a boolean indicating whether the prompt is confirmed, therefore you can simply save the resulting boolean in a variable and check whether it is true before executing the AJAX request.

$('.report').click(function() {
    var id = $(this).data("id");
    var confirmed = confirm("do you really want to report this post?");

    if (confirmed) {
      $.ajax({
          url: 'forumreport.php',
          type: 'GET',
          data: 'id='+id,
          success: function(){
              alert("reported!!");
          },
      });
    }
});