Search code examples
javascriptmootoolsalerts

Invoke an alert on an href, then continue to a new page


I have a link to a page which invokes the 'Sexy Alert Box' script to pop a message asking if users agree to Terms and Conditions with options "I Agree" and "Cancel".

I've got that much going but now I need for the "I Agree" option to send them to a new page. ("Cancel" returns the user the current page.)

Something to do with document.location.href?

I am using the mootools framework.

Sexy Alert Box 1.2 mootools & jQuery

Here's the code:

<a href="#" 
    onclick="Sexy.confirm('Do you agree to the terms and conditions?', {
        textBoxBtnOk: 'I Agree', // goes to www.newpage.com
        textBoxBtnCancel: 'Cancel' // return to current page    
    });">Link</a>

Solution

  • The standard, built-in javascript confirm function will return true or false, depending on the button pushed (this is a synchronous action), but this Sexy.confirm plugin looks like something that is going to return its choice via callback functions (it will be an asynchronous action).

    For example,

    function doConfirm() {
        Sexy.confirm('Do you agree to the terms and conditions?', {
            textBoxBtnOk: 'I Agree',
            textBoxBtnCancel: 'Cancel',
            onComplete: function(returnvalue) {
                // here is where you act, after user has made a choice...
                if (returnvalue) {
                    //alert ("pressed OK");
                    window.location.href = '/page1/';
                }
                else {
                    //alert("pressed Cancel");
                    window.location.href = '/page2/';
                }
            }
        });
        return false; // this is to cancel the native click event
    }
    

    And then you can make your link tags a little nicer,

    <a href="#" onclick="return doConfirm();">Link</a>
    

    Good luck!