CODEWITHSUNDEEP
javascriptjqueryhtmlbuttonhyperlink
PHPLover
PHPLover

Reputation: 12957

How to make the same working javascript code on hyperlink workable on click of a button?

I've a following javascript code which is working fine upon clicking on the below hyperlink.

<a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a>
<script>
function ConfirmDelete() {
  var ans=confirm("Are you sure to delete this event?");
  if(!ans) {
      return false;
  }
}
</script>

Now I've a HTML code for a button and I want to execute the same functionality as above when user clicks on the below button. 

<button type="button" class="btn btn-info" data-toggle="popover">Delete Event</button>

So tell me what changes I need to make to the code I written for a hyperlink?

Thanks.

Upvotes: 0

Views: 51

Answers (4)

Transformer
Transformer

Reputation: 3760

    $(document).ready(function(){
        $("a").click(function() {
            if (ConfirmButtonDelete("delete_event.php?event_id=110") == false) {
              $(this).attr("href", "#");
            } else {
              $(this).attr("href", "delete_event.php?event_id=110");
            }
        });
        $("button").click(function() {
            if (ConfirmButtonDelete("delete_event.php?event_id=110") == false) {
              //do nothing
            } else {
              window.location = "delete_event.php?event_id=110";
            }
        });
    });

    function ConfirmButtonDelete(url) {
        var ans=confirm("Are you sure to delete this event?");
        if(!ans) {
            return false
        } else {
            return true
        }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="popover">Delete Event</button>
<a href="delete_event.php?event_id=110" class="list-group-item">Delete Event</a>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

just add an onclick attribute, same as anchor, without return

<button type="button" class="btn btn-info" data-toggle="popover" onClick="ConfirmDelete('delete_event.php?event_id=110')">Delete Event</button>

function ConfirmDelete(url) {
  var ans=confirm("Are you sure to delete this event?");
  if(!ans) {
      return false;
  }
  window.location.href = url; 
}

and since you also have added jQuery tag

<button type="button" class="btn btn-info" data-toggle="popover" data-url="delete_event.php?event_id=110">Delete Event</button>

<script>
   $( "button.btn-info" ).bind( "click", function(){
     ConfirmDelete($( this ).attr( "data-url" )) ;
   } )
   function ConfirmDelete(url) {
      var ans=confirm("Are you sure to delete this event?");
      if(!ans) {
         return false;
      }
      window.location.href = url; 
   }
</script>

Upvotes: 1

Mir Gulam Sarwar
Mir Gulam Sarwar

Reputation: 2648

give id to the button and hyperlink

<button type="button" class="btn btn-info" id="btn" data-toggle="popover">Delete Event</button>

$('#btn').click(function(){
   $('#hyperlickid').click();
   window.locaction.reload(true)
})

Upvotes: 0

Ashish
Ashish

Reputation: 498

Try this.

<button type="button" class="btn btn-info" data-toggle="popover" onClick="ConfirmDelete()">Delete Event</button>

<script>
function ConfirmDelete() {
  var ans=confirm("Are you sure to delete this event?");
  if(!ans) {
      return false;
  }else{
    window.location.href = "http://stackoverflow.com";
  }
}
</script>

Upvotes: 0

Related Questions