Javascript bootbox, can't get button to click on ENTER key

Question

When I open the bootbox, enter information, then press enter, it's closing the bootbox and scrolling back to the top of the page. (It's not pressing the create button or the cancel button). I've tried changing classname to btn-primary. This doesn't help.

Here's the code:

    bootbox.dialog({
    title: 'Create a new bucket',
    message:
            '<div class="row"> ' +
                '<div class="col-md-12"> ' +
                    '<form class="form-horizontal"> ' +
                        '<div class="form-group"> ' +
                            '<label class="col-md-4 control-label" for="bucketName">Bucket Name</label> ' +
                            '<div class="col-md-8"> ' +
                                '<input id="bucketName" name="bucketName" type="text" placeholder="Enter bucket name" class="form-control" autofocus> ' +
                                '<div>' +
                                    '<span id="bucketModalErrorMessage" ></span>' +
                                '</div>'+
                            '</div>' +
                        '</div>' +
                        '<div class="form-group"> ' +
                            '<label class="col-md-4 control-label" for="bucketLocation">Bucket Location</label> ' +
                            '<div class="col-md-8"> ' +
                                '<select id="bucketLocation" name="bucketLocation" class="form-control"> ' +
                                    generateBucketOptions(self.settings.bucketLocations) +
                                '</select>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>' +
            '</div>',
    buttons: {
        cancel: {
            label: 'Cancel',
            className: 'btn-default'
        },
        confirm: {
            label: 'Create',
            className: 'btn-success',
            callback: function () {
                var bucketName = $('#bucketName').val();
                var bucketLocation = $('#bucketLocation').val();

                if (!bucketName) {
                    var errorMessage = $('#bucketModalErrorMessage');
                    errorMessage.text('Bucket name cannot be empty');
                    errorMessage[0].classList.add('text-danger');
                    return false;
                } else if (!isValidBucketName(bucketName, false)) {
                    bootbox.confirm({
                        title: 'Invalid bucket name',
                        message: 'Amazon S3 buckets can contain lowercase letters, numbers, and hyphens separated by' +
                        ' periods.  Please try another name.',
                        callback: function (result) {
                            if (result) {
                                self.openCreateBucket();
                            }
                        },
                        buttons: {
                            confirm: {
                                label: 'Try again'
                            }
                        }
                    });
                } else {
                    self.createBucket(bucketName, bucketLocation); //THIS IS IMPORTANT
                }
            }
        }
    }
});

Answer 1

Here's an example with a confirm dialog

var dialog = bootbox.confirm({ ... });

//https://github.com/makeusabrew/bootbox/issues/411
dialog.on("shown.bs.modal", function () {
    dialog.attr("id", "dialog-1");
});

//https://stackoverflow.com/questions/26328539/bootbox-make-the-default-button-work-with-the-enter-key
$(document).on("submit", "#dialog-1 form", function (e) {
    e.preventDefault();
    $("#dialog-1 .btn-primary").click();
});

Answer 2

If you are using prompt (but this solution should be useful in other cases) this is the easiest way to achieve this functionality.

var input = document.getElementsByClassName("CLASS OF INPUT YOU WANT TO CHOOSE");
input[0].addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
      var click = document.getElementsByClassName("CLASS OF BUTTON YOU WANT TO PRESS");
      click[0].click();
     }
});

I haven't been able to find a way to asign IDs to elements in bootbox, but asigning classes is possible. Of course you can't choose classes the way you choose elements with IDs, so what you have to do is getting the elements by class, this creates array even if you have just one element of said class. Because of this you have to choose the right element in array. In my case that would be [0]. Choose your designeted key and repeat the same process with button.

If you followed my instructions carefully you should be able to submit data with keys.

Answer 3

$('#bucketName').on('keypress', function (event) {
    if(event.which === 13){
        bootbox.hideAll();
        $('html, body').animate({scrollTop: '0px'}, 1000);
    }

});