Reset form invalid values |
Reset form invalid values |
RainLover |
Apr 10 2019, 02:57 AM
Post
#1
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
Here’s a sample form:
CODE <form> <input type="number"> <input type="number"> <button type="button">Reset</button> </form> var form = document.querySelector('form'); function detectChange() { var inputs = form.querySelectorAll('input'); for (var input of inputs) { if (input.value) { return true; } } } form.querySelector('button').addEventListener('click', function() { if (detectChange() && confirm('Are you sure you want to reset?')) { form.reset(); } }); DEMO I’d like the reset button to work even if the user enters non-numeric values. |
Christian J |
Apr 12 2019, 09:43 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,678 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> |
Lo-Fi Version | Time is now: 31st May 2024 - 11:38 PM |