Ron Kreymborg asked 2 years ago
I have been searching for an answer to this question for some time. Perhaps I just need to do more research.
I have a page with mixed inputs of type=number and type=button, where the buttons have different background colours to indicate their two toggle states, typically ON and OFF. Should any buttons be ON when the Submit button is pressed, these buttons revert to their default off colour for however long it takes for the page to be refreshed.
Nothing happens to the state the button is managing, but to the user, the fact an ON button can flick momentarily to OFF can be quite disconcerting.
Because it happens the instant the Submit button is pressed, I assume it is the client that clears all “inputs” and in my button case that is typically the OFF colour.
My ideal is the button colour does not change at all, but would be happy with a solution that removes all colour during the time it takes for the page update (can be seconds).
Suggestions very welcome.
Many thanks, Ron
Sara Santos Staff answered 2 years ago
Hi.
Have you tried using javascript and associate an action to a button to do that? https://www.w3schools.com/jsref/event_onclick.asp
If you’re sending data to the ESP32, use websocket. The web page won’t need to refresh and you can associate actions to buttons to change color or state without refreshing the web page.
Regards,
Sara
Ron Kreymborg answered 2 years ago
Thanks for that suggestion Sara. Using a checkbox as per your suggestion in BWS 2.2 and 2.5 did make managing the button display easier, particularly using CSS to manage the button background color (I would show a screen grab only can’t get your insert image to work).
However my problem with using the checkbox background color of red for un-checked and green for checked (along with a text overlay saying START/STOP or ON/OFF, etc), is that a Submit or Enter (required I think to update the numeric inputs) clears all fields to their blank or zero state during the time it takes for a refresh, which in my case of course displays a red button.
I think I will need to live with this.
Best regards,
Ron
Sara Santos Staff answered 2 years ago
Hi.
Instead of using a Submit button, use a javascript action to send data via websocket.
That way the page won’t need to be refreshed when you submit the data.
Regards,
Sara