In-Button Confirmation Using jQuery/Bootstrap

Question

I have read a lot around using Modal Dialogs for confirming submission - but I wanted to take another approach.

I want to have a button called 'Approve' and when I click it, it slides out into another button that says 'Confirm'. If I don't click it within 5 seconds or so, it goes back to 'Approve' otherwise, if I click it in a good time, it executes an action.

Has anyone ever done this before? As opposed to using popovers or modals or something, I actually want to change the button 'Approve' to say 'Confirm' (and maybe color too... appropriate animations, etc).

I'm fairly new to Bootstrap and jQuery.

The closest I've seen to what I want is Ladda: http://msurguy.github.io/ladda-bootstrap/

Any help is greatly appreciated!

Answer 1

You can use jQuery addClass, removeClass to change how the button look and the .val() to change its value

for example, I'll assume your are using btn-primary in the default state, then change it to btn-danger in the confirmation state:

$('#btn').click(function(){
    // before check wich action to do
    if ( $(this).hasClass('btn-primary') ){
        // this is the first click
        $(this).removeClass( 'btn-primary' );
        $(this).addClass( 'btn-danger' );
        $(this).val( 'Confirm' );
        var THIS = $(this);
        setTimeout(function(){
            THIS.removeClass( 'btn-danger' );
            THIS.addClass( 'btn-primary' );
            THIS.val( 'Approve' );
        }, 5000);
    }
    if ( $(this).hasClass('btn-danger') ){
        // this is the second/confirmation click
        $(this).removeClass( 'btn-danger' );
        $(this).addClass( 'btn-primary' );
        $(this).val( 'Approve' );

        // do your action
    }
});

---

If you are using jQueryUI you can use the switchClass function, and you can also get a nice transition of the colors :)

Answer 2

@MadScout this plugin help you with 1 row!

https://github.com/stefanocudini/bootstrap-confirm-button

html:

<a class="btn btn-primary btn-approve-item">Approve</a>

javascript:

$('.btn-approve-item').confirmButton({msg:"Confirm", timeout: 5000}, function(e) {
    console.log('Approved!');
});