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]

This one makes the Reset button disabled until a form field has changed (detected using the oninput event). After resetting, the button is disabled again.

Note that browser results vary depending on both javascript support and how number INPUT fields are managed.

CODE

<form>
  <input type="number">
  <input type="number">
  <button type="reset">Reset</button>
</form>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
      if (confirm('Are you sure you want to reset?'))
      {
        form.reset();
        form.querySelector('button').disabled=true;
      }
    });
}
);
</script>

[RainLover]

This one makes the Reset button disabled until a form field has changed (detected using the oninput event). After resetting, the button is disabled again.

Note that browser results vary depending on both javascript support and how number INPUT fields are managed.

CODE

<form>
  <input type="number">
  <input type="number">
  <button type="reset">Reset</button>
</form>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
      if (confirm('Are you sure you want to reset?'))
      {
        form.reset();
        form.querySelector('button').disabled=true;
      }
    });
}
);
</script>

What if the user clicks Cancel?

[Christian J]

What if the user clicks Cancel?

You're right, seems my script doesn't terminate the reset that way. Anyone knows why not?

This version seems to cancel in Firefox and Edge, but not in Vivaldi/Chrome:

CODE

<form>
  <input type="number">
  <input type="number">
  <button>Reset</button>
</form>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
        if(confirm('Are you sure you want to reset?'))
        {
            form.reset();
            form.querySelector('button').disabled=true;
        }
    });
});
</script>

[RainLover]

What if the user clicks Cancel?

You're right, seems my script doesn't terminate the reset that way. Anyone knows why not?

This version seems to cancel in Firefox and Edge, but not in Vivaldi/Chrome:

CODE

<form>
  <input type="number">
  <input type="number">
  <button>Reset</button>
</form>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var form = document.querySelector('form');
    form.querySelector('button').disabled=true;
    var inputs = form.querySelectorAll('input');

    // re-enable Reset button after oninput event fires
    for(var input of inputs)
    {
        input.addEventListener('input', function()
        {
            form.querySelector('button').disabled=false;
        });
    }

    form.querySelector('button').addEventListener('click', function()
    {
        if(confirm('Are you sure you want to reset?'))
        {
            form.reset();
            form.querySelector('button').disabled=true;
        }
    });
});
</script>

Thanks for the answer! I’m convinced to follow your advice and use a <button> element of type "reset", but control its behavior using java script:

CODE

if (detectChange() && !confirm('Are you sure you want to reset?')) {
  event.preventDefault();
}

DEMO

Now the reset button clears anything, but the confirm dialog box appears only when there are real values: numbers!

[Christian J]

CODE

if (detectChange() && !confirm('Are you sure you want to reset?')) {
  event.preventDefault();
}

Aha, that did the trick. Thank you!

Strange that "return false" works with inline JS:

CODE

<button type="reset" onclick="return false;">...

but not with external JS, like I used in previous posts.