With reference to the following link http://jsfiddle.net/Xtreu/, I am trying to do same functionality with on click event Delete My Data button with out using any form. I tried in different ways but it does not happened. Can Any one help me how to do the same example with on click
event?
HTML:
<form method="post" action="/echo/html/"> <input type="hidden" name="html" value="<p>Your data has been deleted</p>" /> <input type="submit" value="Delete My Data" /> </form> <div id="confirmBox"> <div class="message"></div> <span class="button yes">Yes</span> <span class="button no">No</span> </div>
JavaScript:
function doConfirm(msg, yesFn, noFn) { var confirmBox = $("#confirmBox"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function () { confirmBox.hide(); }); confirmBox.find(".yes").click(yesFn); confirmBox.find(".no").click(noFn); confirmBox.show(); } $(function () { $("form").submit(function (e) { e.preventDefault(); var form = this; doConfirm("Are you sure?", function yes() { form.submit(); }, function no() { // do nothing }); }); });
Advertisement
Answer
Here the code without using form
Try this example
<div id="msg" style="display:none">Your data has been deleted</div> <input type="button" id="d_btn" value="Delete My Data" /> <div id="confirmBox"> <div class="message"></div> <span class="button yes">Yes</span> <span class="button no">No</span> </div>
script
function doConfirm(msg, yesFn, noFn) { var confirmBox = $("#confirmBox"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function () { confirmBox.hide(); }); confirmBox.find(".yes").click(yesFn); confirmBox.find(".no").click(noFn); confirmBox.show(); } $(function () { $("#d_btn").click(function (e) { e.preventDefault(); var form = $(this).closest('form'); doConfirm("Are you sure?", function yes() { $('#d_btn').hide() $('#msg').show() }, function no() { // do nothing }); }); });