Reset form invalid values Options

[RainLover]

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]

Source: MDN

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.

[RainLover]

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

The confirm dialog box prevents unwanted reset of the form.

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)

[pandy]

Some find confirm boxes irritating. That warning about reset buttons have been around since the beginning of things. I never thought it was a real concern. Today, when the average user is much more experienced I don't think it's a concern at all. But that's me.

[RainLover]

Some find confirm boxes irritating.

They're useful if you use them right — just don't overdo it and let moderation be your guide!