Disabling a Submit button "after" click stops submission

[roni-estein]

This may need a better title and it's joined with livewire. This beat me to death today as I had to upgrade an app to use some new alpine 3 components and therefore upgraded the app to alpine v3 with the latest livewire.

A series of modals would not submit, took me a while to track down the issue, but it was this button! I have an attribute called long-running when a series of items need to be done that loads a spinner on the button for some feedback.

I left a console log in there to verify. The idea is simply show the spinner, and submit the form.

<form wire:submit.prevent="{{ $action }}">

// stuff

// the submit button
</ form>

//here is the component for the submit button

<div wire:replace>
  @if($attributes->has('long-running'))
    <span
      x-data="{
        loading: false,
        errors: {{ ((int) $errors->count())  ?? 0 }},
       }"
    >
    <button

      x-on:click="
      loading = true;
      console.log('clicked')
      setTimeout(() => { loading = false; errors = 0 }, 5000)"

      x-bind:disabled="loading"    // <- remove this and all is well in the world!
                                                      // in alpine 2.x this works


      type="{{ $type }}" {{ $attributes->merge(['class' => $class ]) }} {{ $attributes->except('class') }} >
      <span x-cloak x-show="loading"><x-ci-spinner class="h-5 w-5 text-white animate-spin"/></span>
      <span class="px-2">{{ $slot }}</span>
    </button>
  </span>

  @else
    <button
      type="{{ $type }}" {{ $attributes->merge(['class' => $class]) }} {{ $attributes->except('class') }} >
      {{ $slot }}
    </button>
  @endif
</div>

[bogsio]

I am experiencing the exact same issue. Did you find a solution?

[alexpechkarev]

Not perfect, but you can get around with HTMLFormElement.submit()

<button type="submit" x-data="{loading:false}" x-on:click="loading=true; document.getElementById('form').submit();" class="disabled:opacity-50" x-bind:disabled="loading">Save</button>

[svenadlung]

What about binding loading change to submit of form so it even waits for valid client validation?

<form x-data="{ buttonDisabled: false }" x-on:submit="buttonDisabled = true">
   <button type="submit" x-bind:disabled="loading">Do it!</button>
</form>

[jozefrebjak]

@svenadlung Great. Your solution helped me!

[jozefrebjak]

As @svenadlung suggested here is my solution to disable button with loading in front of text with some bootstrap.

<div x-data="{loading: false}" x-on:submit="loading = true">
  SOME FORM DATA etc.
  <button x-bind:disabled="loading" class="btn btn-primary ms-auto" type="submit">
    <span x-bind:class="{ 'spinner-border spinner-border-sm me-2': loading }" role="status"></span>
    Submit
  </button>
</div>

Now I am curious how to change for example text Submit with for example Loading ? Or how to remove for example icon in front of the text of Submit. Maybe something like:

<div x-data="{loading: false}" x-on:submit="loading = true">
  SOME FORM DATA etc.
  <button x-bind:disabled="loading" class="btn btn-primary ms-auto" type="submit">
    <span x-bind:class="{ 'spinner-border spinner-border-sm me-2': loading }" role="status"></span>
    <span x-bind:hidden="loading">Submit></span>
    <span x-show="loading">Loading...</span>
  </button>
</div>

Is there somebody with better solution ?

[SimoTod]

x-text="loading ? 'Loading...' : 'Submit'"

[jozefrebjak]

@SimoTod Perfect! Thank you. I'm still learning what is possible with alpine.

[jozefrebjak]

Now my button looks like:

<button x-bind:disabled="loading" class="btn btn-primary ms-auto" type="submit">
    <span x-bind:class="{ 'spinner-border spinner-border-sm me-2': loading }" role="status"></span>
    <span x-text="loading ? 'Loading' : 'Submit'"><span>
</button>

I tried to add x-text="loading ? 'Loading' : 'Submit'" directly to button, but then <span x-bind:class="{ 'spinner-border spinner-border-sm me-2': loading }" role="status"></span> is not working

[jozefrebjak]

It also seems that with some clicks it's not working, maybe browser cache ?

[yuxufm]

here is my full code to disable button after clicked submit on form:

<form x-data="{ buttonDisabled: false }" x-on:submit="buttonDisabled = true">
   <button :disabled="buttonDisabled" x-text="buttonDisabled ? 'please wait...' : 'save'"></button>
</form>

thanks @svenadlung

[snapey]

My approach is a small delay on disable to allow the click to propagate before setting disabled.

I wanted a self contained button for both form and non-form uses, so attaching to the form was not an option.

<button 
  x-data="{
    disabled:false, 
    delayDisable: function () {
      setTimeout(() => {
        this.disabled=true;
      }, 50);
    },
  }" 
  x-on:click="delayDisable()"
  x-bind:disabled="disabled"

[ekwoka]

The simple version is just that you should have the form submit handler do whatever disabled the button instead of the button click itself.