Skip to content
Advertisement

Unable to perform the on click event

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="&lt;p&gt;Your data has been deleted&lt/p&gt;" />
    <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
        });
    });
});

DEMO

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement