Reset form invalid values |
Reset form invalid values |
pandy |
Apr 12 2019, 08:46 AM
Post
#21
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Some find confirm boxes irritating. That warning about reset buttons have been around since the beginning of things. I never thought it was a real concern. Today, when the average user is much more experienced I don't think it's a concern at all. But that's me.
|
Christian J |
Apr 12 2019, 09:43 AM
Post
#22
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
This one makes the Reset button disabled until a form field has changed (detected using the oninput event). After resetting, the button is disabled again.
Note that browser results vary depending on both javascript support and how number INPUT fields are managed. CODE <form> <input type="number"> <input type="number"> <button type="reset">Reset</button> </form> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('form'); form.querySelector('button').disabled=true; var inputs = form.querySelectorAll('input'); // re-enable Reset button after oninput event fires for(var input of inputs) { input.addEventListener('input', function() { form.querySelector('button').disabled=false; }); } form.querySelector('button').addEventListener('click', function() { if (confirm('Are you sure you want to reset?')) { form.reset(); form.querySelector('button').disabled=true; } }); } ); </script> |
Christian J |
Apr 12 2019, 09:56 AM
Post
#23
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Some find confirm boxes irritating. Yes, Jakob doesn't like it: https://www.nngroup.com/articles/reset-and-cancel-buttons/ QUOTE Today, when the average user is much more experienced Not so sure about that, many newcomers to the web are only familiar with dumbed-down devices (like smartphones, or browsers that hide part of the URL), so my guess is they learn very little. But to me the problem with Reset buttons is not so much about the users' experience, as avoiding clicking the button by mistake. |
RainLover |
Apr 12 2019, 10:14 AM
Post
#24
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
This one makes the Reset button disabled until a form field has changed (detected using the oninput event). After resetting, the button is disabled again. Note that browser results vary depending on both javascript support and how number INPUT fields are managed. CODE <form> <input type="number"> <input type="number"> <button type="reset">Reset</button> </form> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('form'); form.querySelector('button').disabled=true; var inputs = form.querySelectorAll('input'); // re-enable Reset button after oninput event fires for(var input of inputs) { input.addEventListener('input', function() { form.querySelector('button').disabled=false; }); } form.querySelector('button').addEventListener('click', function() { if (confirm('Are you sure you want to reset?')) { form.reset(); form.querySelector('button').disabled=true; } }); } ); </script> What if the user clicks Cancel? |
Christian J |
Apr 12 2019, 10:58 AM
Post
#25
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
What if the user clicks Cancel? You're right, seems my script doesn't terminate the reset that way. Anyone knows why not? This version seems to cancel in Firefox and Edge, but not in Vivaldi/Chrome: CODE <form> <input type="number"> <input type="number"> <button>Reset</button> </form> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('form'); form.querySelector('button').disabled=true; var inputs = form.querySelectorAll('input'); // re-enable Reset button after oninput event fires for(var input of inputs) { input.addEventListener('input', function() { form.querySelector('button').disabled=false; }); } form.querySelector('button').addEventListener('click', function() { if(confirm('Are you sure you want to reset?')) { form.reset(); form.querySelector('button').disabled=true; } }); }); </script> |
RainLover |
Apr 12 2019, 11:07 AM
Post
#26
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
What if the user clicks Cancel? You're right, seems my script doesn't terminate the reset that way. Anyone knows why not? This version seems to cancel in Firefox and Edge, but not in Vivaldi/Chrome: CODE <form> <input type="number"> <input type="number"> <button>Reset</button> </form> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('form'); form.querySelector('button').disabled=true; var inputs = form.querySelectorAll('input'); // re-enable Reset button after oninput event fires for(var input of inputs) { input.addEventListener('input', function() { form.querySelector('button').disabled=false; }); } form.querySelector('button').addEventListener('click', function() { if(confirm('Are you sure you want to reset?')) { form.reset(); form.querySelector('button').disabled=true; } }); }); </script> Thanks for the answer! I’m convinced to follow your advice and use a <button> element of type "reset", but control its behavior using java script: CODE if (detectChange() && !confirm('Are you sure you want to reset?')) { event.preventDefault(); } DEMO Now the reset button clears anything, but the confirm dialog box appears only when there are real values: numbers! |
RainLover |
Apr 12 2019, 10:54 PM
Post
#27
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
|
Christian J |
Apr 13 2019, 04:12 AM
Post
#28
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
CODE if (detectChange() && !confirm('Are you sure you want to reset?')) { event.preventDefault(); } Aha, that did the trick. Thank you! Strange that "return false" works with inline JS: CODE <button type="reset" onclick="return false;">... but not with external JS, like I used in previous posts. |
Lo-Fi Version | Time is now: 25th April 2024 - 06:51 AM |