The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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

Posts in this topic
RainLover   Reset form invalid values   Apr 10 2019, 02:57 AM
CharlesEF   Is this actual code? The form HTML has several pr...   Apr 10 2019, 03:12 AM
RainLover   The function detectChange() doesn't return fa...   Apr 10 2019, 12:08 PM
CharlesEF   The function detectChange() doesn't return f...   Apr 10 2019, 03:49 PM
Christian J   Well, that function should return true or false...   Apr 10 2019, 04:58 PM
Christian J   I’d like the reset button to work even if the u...   Apr 10 2019, 05:37 AM
pandy   I guess a normal reset button is out of the questi...   Apr 10 2019, 05:58 AM
RainLover   I guess a normal reset button is out of the quest...   Apr 10 2019, 12:15 PM
pandy   I guess a normal reset button is out of the ques...   Apr 10 2019, 02:58 PM
RainLover   I recall form fields with invalid values are not ...   Apr 10 2019, 12:12 PM
Christian J   Source: [url=https://developer.mozilla.org/en-US/...   Apr 10 2019, 12:54 PM
RainLover   The confirm dialog box prevents unwanted reset o...   Apr 12 2019, 02:37 AM
pandy   Some find confirm boxes irritating. That warning a...   Apr 12 2019, 08:46 AM
Christian J   Some find confirm boxes irritating. Yes, Jakob d...   Apr 12 2019, 09:56 AM
RainLover   Some find confirm boxes irritating. They're ...   Apr 12 2019, 10:54 PM
CharlesEF   Actually, isn't the form that has the reset me...   Apr 10 2019, 05:56 PM
pandy   Yes. There is no such attribute. Unless HTML 5 has...   Apr 10 2019, 08:52 PM
Christian J   Yes. There is no such attribute. Unless HTML 5 ha...   Apr 11 2019, 04:58 AM
pandy   Doesn't anyone understand it anymore? There is...   Apr 11 2019, 06:21 AM
Christian J   Doesn't anyone understand it anymore? There i...   Apr 11 2019, 09:51 AM
pandy   A T T R I B U T E ! :lol: No, I meant simil...   Apr 11 2019, 10:19 AM
Christian J   Actually, isn't the form that has the reset m...   Apr 11 2019, 04:57 AM
CharlesEF   No, an HTML Reset button doesn't need to use...   Apr 11 2019, 12:33 PM
Christian J   This one makes the Reset button disabled until a f...   Apr 12 2019, 09:43 AM
RainLover   This one makes the Reset button disabled until a ...   Apr 12 2019, 10:14 AM
Christian J   What if the user clicks [i]Cancel? You're ri...   Apr 12 2019, 10:58 AM
RainLover   What if the user clicks [i]Cancel? You're r...   Apr 12 2019, 11:07 AM
Christian J   [code]if (detectChange() && ...   Apr 13 2019, 04:12 AM


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: 18th October 2019 - 08:54 AM