Hi, here is a nice little question. I have a form on a page that has about 20 elements in it. The text on the submit button says ‘Next’ therefore the form is automatically saved when the user clicks ‘Next’. The Success displays a notification message of a successful save as normal. All good so far.
But if the user has not made any changes and ‘Next’ is clicked, the notification message is still displayed.
So the question is, How to suppress the displaying of the notification message when no changes have been made. I know I could go to each element of the page and put something in the Change to flag that an edit has happened, but I am hoping Wappler has a status at Form level that can signify if any element has been changed? Anyone know?
Hello,
You can check if a form element has changed using a bit of a custom js code.
So you will need an app connect variable for this as well.
Create a variable and call it formdirty. Set its value to 0:
Then using the following code (place it before the closing </body> tag) you can check for changes in the form and set the value of the variable to 1 when there is a change:
<script>
const selectElement = document.querySelector('form');
selectElement.addEventListener('change', (event) => {
dmx.parse("formdirty.setValue(1)")
});
</script>
And then on form success event - run an inline flow with a condition which checks if the variable value is 1. If it’s 1, then the form inputs have changed so you want to show the alert then.
And also don’t forget to reset the variable value back to 0:
Hope that helps.
Hi Teodor
I have inserted the code as per your procedure above, but the variable for dirty is not changing to 1 (from 0), therefore the Notify remains permanently suppressed whether or not an edit has happened.
The code I have is (just before the /body)…
is referencing…
You changed this line:
const selectElement = document.querySelector('form');
the selector should remain like that: form
If you want to use your form id there, then change this line to:
const selectElement = document.getElementById('frmSurveyAnswer');
This is excellent. Any chance it could be made a feature in Wappler?
this is super useful; it would be a great addition as a feature
Hi Teodor, just a final note on this. The code at the bottom of the page did not have any effect, I tried a variety of different ways but could not get a result. The rest of your code worked well when I visited each element and on each elements’s change added the setting of the dirty variable to 1. So all good.
I don’t know why it would not work for you. I need to check your page to see what’s wrong there.
Can this be turned into a Feature Request?
You can create a new topic in the feature request category, so others can vote.