Indicator and disable for form submit

[sergeyzorin]

Buttons have great build-in functionality - when triggered, display loading indicator and set 'disabled' class

But if I have a form with submit button:
<form ic-post-to="/items/add" ic-target="#items">
..fields...
<button type="submit">Add <i class="fa fa-spinner fa-spin"></i></button>
</form>

And click 'Add' button - no indicator and no diasble. Becouse not submit was triggered , but the form itself.

Forms with submits is very common use-case, is there way to automatically display indicator and disable submit-buttons then submitting form?

Currently, indicator can be displayed via ic-indicator attribute at form, a little clumsy, but ok. But how to declaratively disable submit button?

[ninthspace]

I do it like this:

$(document).on('beforeSend.ic', function (event, el, data) {
  if (el.is('form')) {
    // disable button
    el.find('input[type="submit"], button[type="submit"]').prop('disabled', disable);
    
    // ensure we don't submit if already submitted
    if (el.hasClass('form-submitted')) {
        event.preventDefault();
    } else {
      // show spinner
      const spinner = el.find('.fa-spinner');
      if (spinner) {
          spinner.show();
      }
      el.addClass('form-submitted');
    }
  }
});

[1cg]

This should be part of the default behavior for forms. I will look at adding it.

[zodman]

on the code disabled css class is added.

https://github.com/intercoolerjs/intercooler-js/blob/master/src/intercooler.js#L343

Must be a disabled property!

[zodman]

PR #284

[zodman]

some news about this ?

[1cg]

Hi @zodman I have looked into this. It looks like the disabled attribute only apply to inputs:

https://www.w3schools.com/tags/att_disabled.asp

Not to forms. Do you have a link specifying otherwise?

[zodman]

let me edit the PR to apply to all inputs.. wait for it.

[zodman]

patch apply!