Question

I have a form wizard. On step one I need to display a warning if a certain checkbox is checked and others with a certain class aren’t . The problem is that it displays the confirm/warning on the second step after hitting the next button. I need it to prevent the browser from moving to the second step while displaying the warning.

$("#step0Next").live('click', function(event) {
        var ask = confirm("Do You Really Want To Continue");
        if($("#RT").is(":checked") && !$(".ex").is(':checked') &&
(ask===false)) { 
            event.preventDefault();
        } 
    });

http://www.kinetick.com/Test/purchaseTest
If you don’t make any selections and hit “Next” (“#step0Next”) it goes to step 2 with the confirm dialog. I need that to happen on step 1, pressing cancel would keep you there, hitting OK would allow you to continue onto step 2. Im using the formToWizard.js plug in if that matters.

thanks!

Answer 1

Warning, this is a bit hacky and specific to your needs and site (others finding this, use other solutions!):

$("#step0Next").live('click', function(event) {
   $('#step1Prev').click();                                     //go back, hacky!
   if($("#RT").is(":checked") && !$(".ex").is(':checked')) {          //conditons
     if(!confirm("Do You Really Want To Continue")) return;    //user said cancel
     $("#step0Next").die('click');        //user said Ok, prevent prompting again
   }
   $(this).triggerHandler('click');                      //resume normal behavior
});

Since you can’t override the normal form behavior (their click handler happens before your .live() one), we’re just bypassing it. This quickly clicked the next page’s button to go back to the first page, so instead of preventing the “next” behavior, we’re just reversing it before the UI updates.

Then if the conditions aren’t met we’re prompting the user to confirm their “move on” choice, but only once, if they click cancel, we’ll continue to prompt, if they click Ok then we let them move on and don’t won’t bother them again by using .die() to remove this .live() handler.