CODEWITHSUNDEEP
jquerybootbox
Annie
Annie

Reputation: 111

Is it possible to disable button on click in bootbox?

I'm using a Bootbox dialog to add an item. When the "Save" button is clicked I would like to disable it so they can't click it again and send another request to the server. Is this possible?

Below is my code

var box = bootbox.dialog({
    title: '<span> Add Menu </span>',
    message: 
            '<form id="menu_form" class="form-horizontal" method="post" enctype="multipart/form-data" ><div class="form-group">'+
            '<div class="row no-margin">'+
                      '<div class="form-group col-sm-12">' +
                      '<label>Item Name</label>'+
                      '<input type="text" class="form-control" id="item_name" name="item_name" placeholder="Item Name"> ' +
                      '</div>' +
                      '</div>'+
            '</form>',
    buttons: {
      danger: {
        label: "Cancel",
        className: "btn btn-dark0",
        callback: function() {
         box.modal('hide');
        }
      },
      success: {
        label: '<i class="icon wb-check" aria-hidden="true"></i> Save',
        className: "btn btn-info",
        callback: function() {

          $.ajax({ // ajax to add item 

          });
        }
        return false;}
      },

    }
});

Here when i double click the "Save button", item adds two times.

Upvotes: 0

Views: 835

Answers (1)

Matt.S
Matt.S

Reputation: 287

An easy way of doing this would be using jquery:

$('.btn-info').click(function(){
   $(this).prop('disabled', true);
});

Upvotes: 1

Related Questions