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
});
});
});