CODEWITHSUNDEEP
jquery
Randy Tang
Randy Tang

Reputation: 4353

jQuery: button click confirmation

I have the following html and jquery codes for deleting a member account with confirmation. But the code doesn't seem to work: even if I click "cancel" in the pop-up window, the request is still submitted and the account is deleted. How should I correct this? Thanks.

HTML:

<button class="member" href="/admin?arg1=deleteMember" onclick="return confirm('Are you sure？')">Delete member</button>

jQuery:

$(document).ready(function() {
  $('.member').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
      return false;
  });
});

Upvotes: 12

Views: 63764

Answers (5)

toddmo
toddmo

Reputation: 22406

I found this to be quite simple. It just uses bootstrap and jquery.

    $(document).ready(function() {
        $('a[data-confirm]').click(function(ev) {
            var href = $(this).attr('href');
            $('#modal').find('.modal-title').text($(this).attr('data-confirm'));
            $('#modal-btn-yes').attr('href', href);
            $('#modal').modal({show:true});
            return false;
        });
    });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a  href="controllers/my-delete.php?id=5" 
    class="btn btn-danger" 
    role="button" 
    style="width: 100%;"
    data-confirm="Are you sure you want to delete?">Delete</a>

<div class="modal fade " id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Are You Sure?</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        There is no way to undo this action
      </div>
      <div class="modal-footer">
        <a id="modal-btn-yes" class="btn btn-danger" >Yes</a>
        <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
      </div>

    </div>
  </div>
</div>

Upvotes: 2

edunuke
edunuke

Reputation: 160

Ok. I figured it out by my own before looking at any of these valid answer. I am just going to throw mine for anyone to try:

FIRST THE HTML

1st: Suppose this is the button you are presenting to the user:

<button id="btn_to_check">Do Something</button>

2nd: Now only if the user clicks the button #btn_to_checkyou present them with a confirmation window with two buttons to confirm their intent (i.e. accept and go back):

<div id="btn_confirmation_window" style="display:none">
  <button id="accept" value="true">accept</button>
  <button id="go_back" value="false">go back</button>
</div>

NOW THE JAVASCRIPT

$('#btn_to_check').on('click', function(){
  confirmationWindow();
});

function confirmationWindow(){
    $('#btn_confirmation_window').fadeIn(); //or show() or css('display','block')
    $('#btn_confirmation_window button').on('click', function(){
          var confirm= $(this).attr('value');
          if (confirm=='true') {   
                 //Code if true e.g. ajax
          } else if (confirm=='false'){
                //Code if false
          }
      }
}

Hope it helps!

Upvotes: 2

Guffa
Guffa

Reputation: 700272

Returning false in a click handler for a button (or an input type="button") has no effect, because there is no default behaviour to stop, like with an input type="submit" button or a link.

Remove the onclick attribute in the tag, and call confirm in the jQuery click handler:

$(document).ready(function() {

  $('.member').click(function() {
    if (window.confirm('Are you sure？')) {
      $('#content').load($(this).attr('href'));
    }
  });

});

Upvotes: 3

Dane Hillard
Dane Hillard

Reputation: 900

$(document).ready(function() {
  $('.member').click(function() {
    if (confirm('Are you sure?')) {
      var url = $(this).attr('href');
      $('#content').load(url);
    }
  });
});

Then remove onclick attribute from the HTML element.

Upvotes: 39

Plynx
Plynx

Reputation: 11461

You've declared your events in two ways. One uses an inline event handler, and one uses JQuery. They don't react the same way to return false.

In a JQuery event handler, return false both stops the propagation of the event in its tracks and prevents the default behavior the browser would have applied. In a regular inline event handler, it just stops the default behavior. In the case of this button, there is no default behavior to speak of. It's just a button. So it happily returns false if you click "Cancel", then proceeds to run the JQuery event which is next.

To resolve this issue, it's probably easiest to put all the logic in one place—either JQuery or in the inline event, or have the inline event call a function where you perform all of the logic.

For example: 

$(function()
{
    $('.member').click(function()
    {
        var href = $(this).attr('href');
        if (/delete/.test(href)) if (!confirm('Are you sure?')) return;
        $('#content').load(href);
    });
});

Upvotes: 3

Related Questions