Prevent user from double clicking Next button

[Jason]

 

 Does anyone know of a way to easily prevent double clicking the next button. e.g. I dont want to charge the user's credit card twice.

 

Any help would be great. Thanks!

[Ivan Danchev]

Hello,

The Wizard's ButtonClicking event can be prevented conditionally as shown below:

function OnClientButtonClicking(sender, args) {
    var command = args.get_command();
    if (command == "1") {
        //condition
        if (true) {
            args.set_cancel(true);
        }
    }
}

Regards,
Ivan Danchev
Telerik

[MBEN]

Can you give me an example of the conditional logic to cancel the double click?

[Ivan Danchev]

Hello,

Here's an example of how double clicking can be prevented without cancelling the ButtonClicking event:

<script type="text/javascript">
    function OnClientButtonClicking(sender, args) {
        var command = args.get_command();
        if (command == "1") {
            $telerik.$(".rwzNext").prop('disabled', true);
            setTimeout(function () {
                $telerik.$(".rwzNext").prop('disabled', false);
            }, 500)
        }
    }
</script>

With this approach we disable the Next button (finding it by its class "rwzNext") after it is clicked for certain amount of time (500 milliseconds in the snippet above) and then re-enable it so it can be used to navigate the Steps on single click.

Regards,
Ivan Danchev
Progress Telerik

[MBEN]

This solution still skips the step for me, only it shows the intermediate step being skipped for a brief moment.

[MBEN]

Hi,

I am unable to figure out the condition that would check if the button was clicked twice.

Any help would be appreciated.

[Ivan Danchev]

Hi,

The previously suggested approach prevents double clicking the Next button at my end. Here's a screencast showing:
1. First the default behavior, which causes navigation towards two steps to occur: e.g. if you start at Step1 and double-click Next the Wizard navigates to Step2 and then to Step3
2. The modified (by the logic in the OnClientButtonClicking event handler) behavior, which on double-click causes navigation to the next step only, instead of passing through 2 steps: e.g. starting from Step1 a double-click only navigates to Step2.

Attached you can find the sample runnable page used to record the screencast. Could you give it a try and let us know in case you notice a different behavior than the one demonstrated in the linked screencast?

Regards,
Ivan Danchev
Progress Telerik