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 |
Christian J |
Apr 10 2019, 05:37 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
I’d like the reset button to work even if the user enters non-numeric values. I recall form fields with invalid values are not passed on to javascript (or submitted). So my guess is that if a user enters a non-numeric value in a "type=number" form field, the field will appear to have no value and "if(input.value)" will not return true. |
pandy |
Apr 10 2019, 05:58 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
I guess a normal reset button is out of the question?
|
RainLover |
Apr 10 2019, 12:08 PM
Post
#5
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
|
RainLover |
Apr 10 2019, 12:12 PM
Post
#6
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
I recall form fields with invalid values are not passed on to javascript (or submitted). So my guess is that if a user enters a non-numeric value in a "type=number" form field, the field will appear to have no value and "if(input.value)" will not return true. Yes, exactly! Any workaround? |
RainLover |
Apr 10 2019, 12:15 PM
Post
#7
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
I guess a normal reset button is out of the question? QUOTE You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). Source: MDN |
Christian J |
Apr 10 2019, 12:54 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
The above applies to all Reset buttons, regardless of how they're made. Yes, exactly! Any workaround? I'd just use an HTML Reset button, if you need one. Otherwise, why check in the javascript that the number INPUT field has a value? Resetting an empty form field doesn't hurt anything, AFAIK. |
pandy |
Apr 10 2019, 02:58 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
I guess a normal reset button is out of the question? QUOTE You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). Source: MDN If that's so, why are you using one? |
CharlesEF |
Apr 10 2019, 03:49 PM
Post
#10
|
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
#11
|
. Group: WDG Moderators Posts: 9,667 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! |
CharlesEF |
Apr 10 2019, 05:56 PM
Post
#12
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Actually, isn't the form that has the reset method? An input or button can have a type of reset but doesn't that just call the reset method of the form itself?
|
pandy |
Apr 10 2019, 08:52 PM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Yes. There is no such attribute. Unless HTML 5 has come up with one.
|
Christian J |
Apr 11 2019, 04:57 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Apr 11 2019, 04:58 AM
Post
#15
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
Yes. There is no such attribute. Unless HTML 5 has come up with one. Is nobody reading the spec anymore? https://www.w3.org/TR/html401/interact/form...def-type-BUTTON https://www.w3.org/TR/html/sec-forms.html#e...def-button-type |
pandy |
Apr 11 2019, 06:21 AM
Post
#16
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Doesn't anyone understand it anymore? There is a reset button, but there is no reset attribute.
QUOTE No, an HTML Reset button doesn't need to use javascript. Of course not. But that's what a reset attribute would need. But that isn't how I interpreted what Charles said. I was more thinking he meant that the functionality probably is a feature of the form rather than of the button. That the button just triggers it. |
Christian J |
Apr 11 2019, 09:51 AM
Post
#17
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
Doesn't anyone understand it anymore? There is a reset button, but there is no reset attribute. I thought you meant that only INPUT (and not BUTTON) elements could use the TYPE=RESET attribute value. QUOTE But that isn't how I interpreted what Charles said. I was more thinking he meant that the functionality probably is a feature of the form rather than of the button. That the button just triggers it. You mean similar to how you can submit a form with the Enter key, without using a submit button? Otherwise I'd say the reset functionality is part of the rendering engine. |
pandy |
Apr 11 2019, 10:19 AM
Post
#18
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
A T T R I B U T E !
No, I meant similar to do submit button. But exactly how it works isn't important. Only that it does work. |
CharlesEF |
Apr 11 2019, 12:33 PM
Post
#19
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
QUOTE An input or button can have a type of reset but doesn't that just call the reset method of the form itself? No, an HTML Reset button doesn't need to use javascript. But, I agree with you, the OP's javascript makes no sense. Really, all the OP needs is: CODE <form> Of course, when he does add a sumbit button nothing will be submitted without a name attribute for each element.<input type="number"> <input type="number"> <button type="reset">Reset</button> </form> |
RainLover |
Apr 12 2019, 02:37 AM
Post
#20
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
QUOTE The above applies to all Reset buttons, regardless of how they're made. The confirm dialog box prevents unwanted reset of the form. QUOTE Otherwise, why check in the javascript that the number INPUT field has a value? Resetting an empty form field doesn't hurt anything, AFAIK. The confirm box should appear only when there’s a value. (a non-empty input field) |
Lo-Fi Version | Time is now: 21st May 2024 - 10:49 AM |