[solved] how to disable submit button if there's no change

Discussion Ask a question
,
1

Hi,
I have a user input field with a save button. As the save process takes some time, I added a “working” gif to display while the save is happening, and it expands only onClick of the save button. When the save completes, I hide it again. The problem is, that the save button can be clicked without any (additional) update, and then the WIP gif won’t dissappear as there’s nothing to save.
I don’t think that enabling the save button only with an onChange event from the input text field is a good option, as that will only activate the button once someone clicks on it (or maybe it’s a race condition?).
So my question is, what’s the best way to enable the save button only once something changes in the input text, or at least only display the gif in the case of a change?

Here’s some of the code and an image to show you what I’m talking about:

export function saveButton_click(event) {
    $w('#saveTextProgressArrows').expand();
}

2

How about: if the field is blank, disable the submit button. If there is something in the textfield, enable the submit button:

let input = $w(“#textfield”).value;
if (input === “”) {
$w(“submitbutton”).disable
if (input != “”) {
$w(“submitbutton”).enable

Not entirely sure if that code works, I haven’t run it

3

@Kaleb thank you. But that should only solve the problem if it’s left blank, not if it’s already populated and someone presses save, or presses it twice.

4

I think I solved the problem, although I don’t think the .disable is actually disabling the button:

var itemChanged = false;

export function dataset1_itemValuesChanged() {
    itemChanged = true;
}

export function saveButton_click(event) {
 if (itemChanged) {
        console.log("item changed, in save ");
        itemChanged = false;
        $w('#saveTextProgressArrows').expand();
        $w('#saveButton').disable();
    }
}

export function dataset1_afterSave() {
    $w('#saveTextProgressArrows').collapse();
    $w('#successText').show();
    $w('#successText').expand();
    $w('#saveButton').enable();
    itemChanged = false;
}

export function dataset1_error() {
    $w('#saveTextProgressArrows').collapse();
    $w('#errorText1').show();
    $w('#errorText1').expand();
    $w('#saveButton').enable();
}