CODEWITHSUNDEEP
javascriptjquery
Jennifer Anthony
Jennifer Anthony

Reputation: 2277

Alert with several option with jQuery

I want make a alert that after click on button delete ask did you want delete this? with two options: ok and cancel. If user clicks on ok the value is deleted. If the user clicks on cancel don't delete the value.

Like this in this site:

Stackoverflow confirmation dialog for post deletion vote

How to do this with jQuery?

Upvotes: 9

Views: 16143

Answers (4)

Samich
Samich

Reputation: 30145

<a href="#" id="delete">Delete</a>

$('#delete').click(function() {
   if (confirm('Do you want to delete this item?')) {
      // do delete item
   }
});

Code: http://jsfiddle.net/hP2Dz/4/

Upvotes: 15

Ricardo Binns
Ricardo Binns

Reputation: 3246

If you want to style your alert, check this plugin: jquery-alert-dialogs. It's very easy to use.

jAlert('This is a custom alert box', 'Alert Dialog');

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
     jAlert('Confirmed: ' + r, 'Confirmation Results');
});

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

UPDATE: the oficial site is currently offline. here is another source

Upvotes: 3

Jon Newmuis
Jon Newmuis

Reputation: 26512

In JavaScript, that type of box is confirm, not alert. confirm returns a boolean, representing whether the user responded positively or negatively to the prompt (i.e. clicking OK results in true being returned, whereas clicking cancel results in false being returned). This is applicable to jQuery, but also in JavaScript more broadly. You can say something like:

var shouldDelete = confirm("Do you want to delete?");
if (shouldDelete) {
  // the user wants to delete
} else {
  // the user does not want to delete
}

Upvotes: 2

isJustMe
isJustMe

Reputation: 5470

Might not be jquery but is the simple principle that you could use

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("vote ");
if (r==true)
  {
  alert("ok delete"); //you can add your jquery here
  }
else
  {
  alert(" Cancel! dont delete"); //you can add your jquery here
  }
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Vote to delete?" /> <!-- can be changed to object binding with jquery-->

</body>
</html>Vot

Upvotes: 1

Related Questions