The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Reset form invalid values
RainLover
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 10 2019, 03:12 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,669
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 10 2019, 05:37 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,222
Joined: 10-August 06
Member No.: 7



QUOTE(RainLover @ Apr 10 2019, 09:57 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 10 2019, 05:58 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,373
Joined: 9-August 06
Member No.: 6



I guess a normal reset button is out of the question?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 10 2019, 12:08 PM
Post #5


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(CharlesEF @ Apr 10 2019, 03:12 AM) *

The function detectChange() doesn't return false.

Thanks for the answer, but I don't understand what you mean.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 10 2019, 12:12 PM
Post #6


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ Apr 10 2019, 05:37 AM) *

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 10 2019, 12:15 PM
Post #7


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(pandy @ Apr 10 2019, 05:58 AM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 10 2019, 12:54 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,222
Joined: 10-August 06
Member No.: 7



QUOTE(RainLover @ Apr 10 2019, 07:15 PM) *

Source: MDN

The above applies to all Reset buttons, regardless of how they're made.

QUOTE(RainLover @ Apr 10 2019, 07:12 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 10 2019, 02:58 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,373
Joined: 9-August 06
Member No.: 6



QUOTE(RainLover @ Apr 10 2019, 07:15 PM) *

QUOTE(pandy @ Apr 10 2019, 05:58 AM) *

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? happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 10 2019, 03:49 PM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,669
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(RainLover @ Apr 10 2019, 12:08 PM) *

QUOTE(CharlesEF @ Apr 10 2019, 03:12 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 10 2019, 04:58 PM
Post #11


.
********

Group: WDG Moderators
Posts: 8,222
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Apr 10 2019, 10:49 PM) *

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 10 2019, 05:56 PM
Post #12


Programming Fanatic
********

Group: Members
Posts: 1,669
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 10 2019, 08:52 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,373
Joined: 9-August 06
Member No.: 6



Yes. There is no such attribute. Unless HTML 5 has come up with one. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 11 2019, 04:57 AM
Post #14


.
********

Group: WDG Moderators
Posts: 8,222
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Apr 11 2019, 12:56 AM) *

Actually, isn't the form that has the reset method?

When using javascript, yes.

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 11 2019, 04:58 AM
Post #15


.
********

Group: WDG Moderators
Posts: 8,222
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 11 2019, 03:52 AM) *

Yes. There is no such attribute. Unless HTML 5 has come up with one. tongue.gif

Is nobody reading the spec anymore? tongue.gif

https://www.w3.org/TR/html401/interact/form...def-type-BUTTON
https://www.w3.org/TR/html/sec-forms.html#e...def-button-type
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 11 2019, 06:21 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,373
Joined: 9-August 06
Member No.: 6



Doesn't anyone understand it anymore? There is a reset button, but there is no reset attribute. tongue.gif

QUOTE
No, an HTML Reset button doesn't need to use javascript.


Of course not. But that's what a reset attribute would need. laugh.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 11 2019, 09:51 AM
Post #17


.
********

Group: WDG Moderators
Posts: 8,222
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 11 2019, 01:21 PM) *

Doesn't anyone understand it anymore? There is a reset button, but there is no reset attribute. tongue.gif

I thought you meant that only INPUT (and not BUTTON) elements could use the TYPE=RESET attribute value. cool.gif

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 11 2019, 10:19 AM
Post #18


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,373
Joined: 9-August 06
Member No.: 6



A T T R I B U T E ! laugh.gif

No, I meant similar to do submit button. But exactly how it works isn't important. Only that it does work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 11 2019, 12:33 PM
Post #19


Programming Fanatic
********

Group: Members
Posts: 1,669
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Apr 11 2019, 04:57 AM) *

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.
I'm not talking about using javascript. The browser itself makes the call, not the user javascript. (pandy understands me)

But, I agree with you, the OP's javascript makes no sense. Really, all the OP needs is:
CODE
<form>
  <input type="number">
  <input type="number">
  <button type="reset">Reset</button>
</form>
Of course, when he does add a sumbit button nothing will be submitted without a name attribute for each element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post 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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st September 2019 - 04:16 PM