How to disable Submit button after data submission success

[Speedy]

I’d like to set the form’s submit button to disabled after the form has successfully submitted its data. The button should be disabled and not respond to further clicks, so I’m referring to the disabled attribute, not the disabled class. I followed a tute here which disabled the button while “executing” but want it to also be disabled after the data has been successfully submitted so the user cannot resubmit it.
I tried to do it by turning the form’s ‘Success’ event where I already have a notification displayed into an inline event and then running an action: “formssa.btn3.disable(-1)” and also tried “formssa.btn3.disable(true)”. Neither worked.
Any ideas how to do this simple action?

Thank you

[Sorry_Duh]

Not really tested this but what if (assuming the button is a submit button in a form)

On the buttons dynamic disabled:
state.executing || status == 200

After a success the status of the form should return 200 for success I believe unless there was another code responded like 403 forbidden etc

Do note unless you save a variable though a page refresh will likely reset this and allow another submit

[Speedy]

Tried this but it did not work; verified I was getting a 200 response.
Thank you

[bpj]

You could return a value from the SC API that the form points to e.g. use a set value called complete set to output 1

And then use

state.executing || formid.data.complete == 1
For the disabled attribute

(Use the form’s id from your page in the expression)

[Sorry_Duh]

Could you maybe screen shot your forms structure and what you entered for the buttons dynamic disabled, just to add the code I sent above would have needed to be entered in code not design in the bind menu

[Speedy]

@bpj

You could return a value from the SC API that the form points to e.g. use a set value called complete set to output 1

I’ve never done this so have no idea where to start. Sounds pretty advanced

[bpj]

Your form points to an API file. In that file use a set value step, give it the name ‘complete’ and a value of 1. Make sure you tick the output option.

The form on your page should have an id. Something like serverconnectform1 so your disabled attribute would be
state.executing || serverconnectform1.data.complete == 1

[Speedy]

Sure, here is the screen shot

[Sorry_Duh]

Might need to re upload the screenshot hasn’t uploaded for me

[Speedy]

Do you mean like this?

[Sorry_Duh]

Ah you are running the form submit through a click event that might be bypassing the disabled attribute I’d need to look into this to confirm

Maybe you could try adding a condition into the flow that uses the status and if its status is 200 do nothing

[Speedy]

I use the click event to trigger some validations, examine the results, and then call form.submit.
I don’t think it would interfere with the disabled event.

[Speedy]

Understood. I will try that. Thank you!

[Sorry_Duh]

Just tested the flow is also disabled correctly is the button that activates the submit inside the form its submitting?

Is the button that activates the form inside the form?

[Speedy]

Yes the button is inside the form

[Speedy]

I see what you are saying. Is there a way to cancel the click event within the flow? Then I suppose if validations passed I could do nothing further and the form would submit.

[Sorry_Duh]

I just tested using a flow on the submit buttons click on a test and for me this disabled the button. After disabled the flow shouldn’t run at all wasn’t sure if this was how flows worked but don’t think the click event is the issue.

The only other thing I can possibly think is if the form is in a conditional region or something is editing the bind from status == 200 to my_conditional_region.status == 200

Maybe the community will have other suggestions this method is working in my tests not sure what the difference is

[Speedy]

I appreciate your help. It has started me thinking about another alternative which I’ll try tomorrow.
Thanks again!

[ben]

Not sure if you have found a solution, but this is what I would do.

1. Add a variable with a value of 0
   
   
2. On form success, set the variable to a value of 1
   
   
3. Add a disabled attribute to the button with the value of the variable.
   
   

The resulting code will look like:

<dmx-value id="var1" dmx-bind:value="0"></dmx-value>
<div class="container">
    <div class="row">
        <div class="col">
            <form id="form1" is="dmx-serverconnect-form" method="post" action="/api/test" dmx-on:success="var1.setValue(1)">
                <input id="text1" name="text1" type="text" class="form-control">
                <button id="btn1" class="btn btn-primary mt-4" type="submit" dmx-bind:disabled="var1.value">Submit</button>
            </form>
        </div>
    </div>
</div>

If you want the value to last longer than a page refresh, use a session or local storage instead.

[bpj]

Can you include the whole of the button code in the screenshot?