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. |
CharlesEF |
Apr 10 2019, 03:12 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Is this actual code? The form HTML has several problems and the javascript code should be surrounded by a <script>...</script> block. The function detectChange() doesn't return false.
This post has been edited by CharlesEF: Apr 10 2019, 03:18 AM |
RainLover |
Apr 10 2019, 12:08 PM
Post
#3
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
|
CharlesEF |
Apr 10 2019, 03:49 PM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
The function detectChange() doesn't return false. Thanks for the answer, but I don't understand what you mean. Well, that function should return true or false! Correct? Currently it only returns true, if the inputs are numeric. Right after the closing } of the for statement is where the 'return false;' should be. I have no idea how browser field validation works, I don't use it at all. Remember, any javascript validation code should be repeated in the PHP script on the server. Why not use a normal reset button? I'm not even sure a button has the 'reset' attribute. |
Christian J |
Apr 10 2019, 04:58 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Well, that function should return true or false! Correct? Currently it only returns true, if the inputs are numeric. Right after the closing } of the for statement is where the 'return false;' should be. Currently I suppose it's used as a boolean: CODE if (detectChange() ... However, all it takes is for one of the number INPUT fields to have a value to make detectChange() return true. (And again, I don't see the purpose of checking for INPUT values before resetting.) QUOTE I'm not even sure a button has the 'reset' attribute. It does! |
Lo-Fi Version | Time is now: 27th April 2024 - 11:37 AM |