Bootbox.js - enable / disable button + custom jquery - How?

Question

I am using bootbox.js to display 2 controls in a modal:

• File Uploader
• Button to submit file.

This is what I have so far in my script section in my view:

     $('#uploadActivity').on('click', function() {
        var dialogHtml = '<form action="/Home/Load" enctype="multipart/form-data" method="post" id="frmSubmitActivity">';
        dialogHtml += '<input type="file" name="GarminActivity"/>';
        dialogHtml += '<div class="text-right"><button class="btn btn-primary has-spinner" type="submit"><i class="glyphicon glyphicon-upload"></i>';
        dialogHtml += '<span class="spinner"><i class="icon-spin icon-refresh"></i></span> @Resources.Upload</button></div>';

        bootbox.dialog({ message: dialogHtml, title: '@Resources.UploadActivity' });
    });

AS you can see, the user presses a button and the modal is displayed. And here are my questions:

1) If I present the button in the modal as disabled, how do I enable it when the users picks a file?

2) As you can see on my custom dialogHTML there is some spinner functionality, that is, when submiting a form a spinner icon is displayed in the button and disables all controls on form, this behaviour is on a javascript file that is referenced, but none of this happens. This is how (is working on other forms:

$("[type=submit]").on('click', function () {
var btn = $(this);
var form = $(this).closest('form');
if ($(form).valid()) {
    $(form).find('input, textarea, button, select').prop('readonly', 'readonly');
    $(btn).toggleClass('active');
    $(btn).attr("disabled", "disabled");
    $(form).submit();
}

});

I have been struggling for 5 days and I can't make it work. Any ideas?

Answer 1

Try

Event Delegation

Attach event handler to document instead of [type=submit] as it will be generated dynamically so it is not present at DOM ready so no event handler is attached to it.

And make sure sure you put this code in DOM ready .

$(document).on('click', '[type=submit]', function (e) {
    e.preventDefault(); //stop form submission
    var btn = $(this),
        form = $(this).closest('form');
    if (form.valid()) {
        form.find('input, textarea, button, select').prop('readonly', true);
        btn.toggleClass('active');
        btn.prop("disabled", true);
        form.submit();
    }
});

event.preventdefault()

To enable button on file selection .

$(document).on('change', '[type=file][name=GarminActivity]', function () {
    var btn = $(this).closest('form').find('[type=submit]');
    btn.prop("disabled", false);
});