CODEWITHSUNDEEP
jqueryhtmlbuttonhref
NickyTheWrench
NickyTheWrench

Reputation: 3230

Change button href to other href on page

I have a website with a logout link. 

<a href="http://specialuniquelogout.com">Logout</a>

When someone clicks this link, a notification box pops up asking you "Are you sure you want to logout?". They can either press yes or no. If they press no, it closes the notification box. But I need to dynamically set the href attribute of the YES button to the href of the original logout link that they clicked.

I was thinking maybe I can somehow use window.location = $this.attr('href'); but can't figure it out.

Here is my code:

<a class="mb-control" data-box="#mb-signout" href="http://UNIQUELOGOUTLINK.com">Logout</a>

<!-- MESSAGE BOX-->
        <div class="message-box animated fadeIn" data-sound="alert" id="mb-signout">
            <div class="mb-container">
                <div class="mb-middle">
                    <div class="mb-title"><span class="fa fa-sign-out"></span> Log <strong>Out</strong> ?</div>
                    <div class="mb-content">
                        <p>Are you sure you want to log out?</p>                    
                        <p>Press No if you want to continue work. Press Yes to logout current user.</p>
                    </div>
                    <div class="mb-footer">
                        <div class="pull-right">
                            <a href="NEED TO PUT THE UNIQUE LOGOUT LINK HERE" class="btn btn-success btn-lg">Yes</a>
                            <button class="btn btn-default btn-lg mb-control-close">No</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END MESSAGE BOX-->

        <!-- START PRELOADS -->
        <audio id="audio-alert" src="audio/alert.mp3" preload="auto"></audio>
        <audio id="audio-fail" src="audio/fail.mp3" preload="auto"></audio>
        <!-- END PRELOADS -->   

<script>

/* PLAY SOUND FUNCTION */
function playAudio(file){
    if(file === 'alert')
        document.getElementById('audio-alert').play();

    if(file === 'fail')
        document.getElementById('audio-fail').play();    
}
/* END PLAY SOUND FUNCTION */

   /* MESSAGE BOX */
    jQuery(".mb-control").on("click",function(){
        var box = $($(this).data("box"));
        if(box.length > 0){
            box.toggleClass("open");

            var sound = box.data("sound");

            if(sound === 'alert')
                playAudio('alert');

            if(sound === 'fail')
                playAudio('fail');

        }        
        return false;
    });
    jQuery(".mb-control-close").on("click",function(){
       $(this).parents(".message-box").removeClass("open");
       return false;
    });    
    /* END MESSAGE BOX */

</script>

<style>
.message-box {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.message-box.open {
    display: block;
}

</style>

Thanks to anyone who can help!

Upvotes: 1

Views: 493

Answers (1)

dfsq
dfsq

Reputation: 193271

It can be something like this:

jQuery(".mb-control").on("click", function() {
  var box = $($(this).data("box"));
  if (box.length > 0) {
    box.toggleClass("open");
    box.find('.btn-close').attr('href', this.href);

    var sound = box.data("sound");

    if (sound === 'alert')
      playAudio('alert');

    if (sound === 'fail')
      playAudio('fail');
  }
  return false;
});

where I added class btn-close to the link:

<a href="NEED TO PUT THE UNIQUE LOGOUT LINK HERE" class="btn btn-success btn-lg btn-close">Yes</a>

Upvotes: 1

Related Questions