CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2232273
user2232273

Reputation: 4964

Javascript: Confirm Box

i have a form with 2 submit buttons (yes and no),

and i have javascript to a custom div which the user has to confirm his choice.

my problem is when i click on the yes button or the no button always open me the 2 divs.

how can i solved that?

i want that one div open for yes and other for no.

DEMO:

FIDDLE DEMO

MY Javascript Code:

 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 doReject(msg, yesFn, noFn) {
        var rejectBox = $("#RejectBox");
        rejectBox.find(".message").text(msg);
        rejectBox.find(".yes,.no").unbind().click(function () {
            rejectBox.hide();
        });
        rejectBox.find(".yes").click(yesFn);
        rejectBox.find(".no").click(noFn);
        rejectBox.show();
    }

    $(function () {
        $("form").submit(function (e) {
            e.preventDefault();
            var form = this;
            doConfirm("Confirma a validação deste Caso Suporte?", function yes() {
                form.submit();
            });
            doReject("Rejeitar?", function no() {
                // do nothing
            });
        });
    });

Upvotes: 1

Views: 592

Answers (3)

George
George

Reputation: 36784

You are calling both prompt functions whenever the form is submitted. Both buttons are submit buttons, so both functions get called in each case. You need a way to differentiate between the two buttons. Try something like this:

$('form').find('button[type=submit]').click(function(e){
    e.preventDefault();
    $form = $(this).closest('form');
    if(this.name == 'yes'){
        doConfirm("Confirm that you want to validate?", function yes() {
            $form.submit();
        });
    } else {
        doReject("Confirm that you want reject?", function no() {
            // do nothing
        });
    }
});

JSFiddle

Upvotes: 2

David Christiansen
David Christiansen

Reputation: 5899

Your problems is that you are calling both doConfirm and doReject. Write a conditional based upon which button they click (yes or no).

Upvotes: 1

Billy
Billy

Reputation: 1104

Use the following:

var confirm; 

function doConfirm(msg, yesFn, noFn) {
    confirm = true;
        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 doReject(msg, yesFn, noFn) {
        confirm = false;
        var rejectBox = $("#RejectBox");
        rejectBox.find(".message").text(msg);
        rejectBox.find(".yes,.no").unbind().click(function () {
            rejectBox.hide();
        });
        rejectBox.find(".yes").click(yesFn);
        rejectBox.find(".no").click(noFn);
        rejectBox.show();
    }

    $(function () {
        $("form").submit(function (e) {
            e.preventDefault();
            var form = this;

            if(confirm){
            doConfirm("Confirm that you want to validate?", function yes() {
                form.submit();
            });} 
            else{
            doReject("Confirm that you want reject?", function no() {
                // do nothing
            });}
        });
    });

I made a simple check with an if statement. When Reject is clicked, the confirm equals true, if the reject button is clicked, it equals false.

fiddle: http://jsfiddle.net/5UbS6/3

Upvotes: 1

Related Questions