ASP.NET MVC - how to get users to confirm deletion

Question

He, I have this page, where I have checkboxes next to each item in the table, and you want to allow the user to select some of them and click the delete button. I just can’t come up with jquery to create a confirmation window and send only by clicking “yes” - this is my page

<%Html.BeginForm(); %> <%List<ShopLandCore.Model.SLGroup> groups = (List<ShopLandCore.Model.SLGroup>)Model; %> <%Html.RenderPartial("AdminWorkHeader"); %> <table width="100%" id="ListTable" cellpadding="0" cellspacing="0"> <tr> <td colspan="5" class="heading"> <input type="submit" name="closeall" value="Close selected" /> <input type="submit" name="deleteall" value="Delete selected" /> </td> </tr> <tr> <th width="20px"> </th> <th> Name </th> <th> Description </th> <th width="150px"> Created </th> <th width="150px"> Closed </th> </tr> <%foreach (ShopLandCore.Model.SLGroup g in groups) { %> <tr> <td> <%=Html.CheckBox(g.Id.ToString()) %> </td> <td> <%=g.Name %> </td> <td> <%=g.Description %> </td> <td> <%=g.Created %> </td> <td> <%=g.Closed %> </td> </tr> <%} %> </table> <%Html.EndForm(); %> 

Please note that this is only for deletion, which it must confirm, and not necessarily for the close button.

Answer 1

Just add the following to the top of your page:

 <script type="text/javascript"> $(document).ready(function(){ $("input[name='deleteall']").click(function() { return confirm('Delete all selected elements?'); }); }); </script> 

Answer 2

You must put the onclick method on your javascript button to display the message, and then stop processing the click if the user has not selected.

You can change the code of the delete button to:

 <input type="submit" name="deleteall" value="Delete selected" onclick="return confirm('Are you sure you want to Delete?');"/> 

Answer 3

Here's how to discreetly register a click event for your button using jQuery (without mixing html markup and script):

 $(function() { $('input[name=deleteall]').click(function() { return confirm('Are you sure'); }); });