Clarification wanted in the difference between input of type button vs input of type submit when calling jquery form.submit

Question

This code should perform the following when clicked:

1. submit the form
2. disable the button to prevent double clicks
3. add a spinner to the button to notify the user something is happening
4. if the form is invalid, stop the form submission, remove the spinner, and enable the button.

While writing this code, I found that it will perform validation and form submission only when the button type is set to submit. If the button type is button, the form.submit in the button click event does not submit the form. Processing of the form halts, no validation occurs, no form submission. I set up break points inside the jquery #myForm.submit, and they are never hit. Does anyone have an explanation for this behavior?

frameworks: jquery 3.4.1, bootstrap 4

<form action="doSomething" id="myForm">
...
<!-- this performs validation and submits the form -->
<button type="submit" id="aButton" class="btn btn-primary" data-validate="true">
    Save
</button>

<!-- this does not perform validation nor submits the form -->
<button type="button" id="bButton" class="btn btn-primary" data-validate="true">
    Save
</button>
</form>

Javascript

removeSpinnerFromButton = function (btn) {
    var span = btn.find('span[id="spinner"]');
    span.remove();

    btn.removeAttr('disabled');
    btn.removeClass('cursor-wait');
};
addSpinnerToButton = function (btn) {
    btn.attr('disabled', 'disabled');
    btn.addClass('cursor-wait');

        $("<span/>", {
            class: 'spinner-border spinner-border-sm',
            id: 'spinner',
            role: 'status',
            aria_hidden: 'true'
        }).appendTo(btn);
};
$('button[data-validate="true"]').click(function () {
        var $self = $(this);

        $('#myForm').submit(function (event) {
            addSpinnerToButton($self);

            if ($(this).valid()) {
                return true;
            } else {
                event.preventDefault();
                removeSpinnerFromButton($self);
                return false;
            }
        });
    });

Edit

this bit of code aides in understanding what is happening.

 $(function(){ $('#myInputSubmit').click(function(){alert('input of type submit clicked');}); $('#myInputButton').click(function(){alert('input of type button clicked');}); $('#myButtonSubmit').click(function(){alert('button of type submit clicked');}); $('#myButtonButton').click(function(){alert('button of type button clicked');}); $('form').submit(function(e){alert('form submitted');e.preventDefault();}); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="button" id="myInputButton" value="input button" /> <input type="submit" id="myInputSubmit" value="input submit" /> <button type="button" id="myButtonButton">button button</button> <button type="submit" id="myButtonSubmit">button submit</button> </form>

Answer 1

input or button type="submit" has a default behaviour: Submit the form

button type="button" (or no type at all) doesn't have a default behaviour and you should add it with a listener, as you're already doing for click event. Inside that function you should validate and, if it's the case, submit the form with $('#myForm').submit();, with no params

With this piece of code, you're adding a submit listener to the form instead of submit it:

    $('#myForm').submit(function (event) {
        addSpinnerToButton($self);

        if ($(this).valid()) {
            return true;
        } else {
            event.preventDefault();
            removeSpinnerFromButton($self);
            return false;
        }
    });

When button is clicked, do your validations and then submit the form. Right now, you need a plugin to validate with $(this).valid() , otherwise, an error will be thrown.

$('button[data-validate="true"]').click(function () {
    var $self = $(this);
    addSpinnerToButton($self);

        if ($(this).valid()) {
            $('#myForm').submit();
        } else {
            removeSpinnerFromButton($self);
        }
});