Show Disabled Button with Spinner on Form Submit

It’s useful to disable the submit button of your form and show a spinner inside it, to indicate the form is being submitted. This way you can prevent duplicate submissions, if a user clicks the button several times.

You can do this with any kind of form - insert or update record, send mail, file upload etc. In our example we use an insert record form:

First, let’s add the spinner inside the button. Select your submit button:

In the properties panel you will find two types of spinners - Border Spinner and Growing Spinner. Try them both see which one do you like more:

We select the border spinner:

You can see the spinner in Design View:

With the button selected, scroll down the properties panel and add new dynamic attribute for the spinner:

Open the display category and select Show:

Click the dynamic data picker button, to select when to show the spinner:

We only need it, when the server action is executing. Under the Server Connect form, expand state and select executing:

The spinner will only be displayed, when the form is submitting. Now let’s disable the button while the form is executing as well.
In the properties panel find the button dynamic attributes and click the add button:

Open the Input category and select Disabled:

Click the dynamic data icon to select when to disable the button:

We only need it disabled, when the server action is executing. Under the Server Connect form, expand state and select executing:

That’s all:

This is the result - the button is disabled and the spinner is displayed when the form is being submitted:

ezgif-1-a66c93ecd372

10 Likes

Has anyone been able to get a form-executing spinner to operate ok forms nested within a repeat or table? (Such as when performing actions on different rows of data) Can’t seem to get that to work as described here and wondering if anyone came up with a clever workaround?

In the expression state.executing, use the complete name (e.g.: form1.state.executing)

Thanks a bunch for the suggestion, @Apple. I added the qualified form name and unfortunately no difference. The code is fairly simple to replicate (a nested POST form inside a table repeat, and in this case simply does a bunch of stuff at the server level and then toggles the submit button’s class).

<table class="table table-sm">
          <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="Some_Stuff_API.data.Some_Stuff_APIs_Returned_Tuples" id="tableRepeat1">
            <tr>
              <td style="">
                <p style="margin-top: auto; margin-bottom: auto; font-size: 16px;" class="mt-3 text-body">{{column1}}</p>

              </td>
              <td class="text-right">
                <form id="form_toggle_cat_selection" method="post" is="dmx-serverconnect-form" action="/api/Toggle_It_API" dmx-on:success="Some_Stuff_API.load({user_id: identity.data.identity})">
                  <input id="user_id_toggle_cat_selection" name="user_id" type="hidden" class="form-control" dmx-bind:value="identity.data.identity">
                  <input id="cat_id_toggle_cat_selection" name="cat_id" type="hidden" class="form-control" dmx-bind:value="category_id"><button id="btn1" class="btn togglebtn_on mt-2" dmx-class:togglebtn_off="selected_avoid=='X'" dmx-text="selected_avoid=='X'?'Off':'On'" type="submit">
                    Button<span class="spinner-border spinner-border-sm" role="status" dmx-show="form_toggle_cat_selection.state.executing"></span>
                  </button>
                </form>
              </td>
            </tr>
          </tbody>
        </table>

The last span tag being the pertinent piece. I’ve also tried simply adding a DMX-hide on the button while form is executing but also no dice. Finally, I also tried adding the tableRepeat1 qualifier as a prefix as well, but also no luck. Unless I’m missing something, it seems like I need to add the repeat’s index value somewhere in order to have the form’s state properly recognized, would be my guess anyway.

Edit, (partially) solved here:

Part of the solution is to yank the form out of the repeat region/table, however that said I do believe there is a legitimate bug with the border inline spinner within repeat regions.

1 Like