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
pandy
post Apr 12 2019, 08:46 AM
Post #21


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 12 2019, 03:46 PM) *

Some find confirm boxes irritating.

Yes, Jakob doesn't like it: https://www.nngroup.com/articles/reset-and-cancel-buttons/

QUOTE
Today, when the average user is much more experienced

Not so sure about that, many newcomers to the web are only familiar with dumbed-down devices (like smartphones, or browsers that hide part of the URL), so my guess is they learn very little. But to me the problem with Reset buttons is not so much about the users' experience, as avoiding clicking the button by mistake.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 12 2019, 10:14 AM
Post #24


Advanced Member
****

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



QUOTE(Christian J @ Apr 12 2019, 09:43 AM) *

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


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(RainLover @ Apr 12 2019, 05:14 PM) *

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 12 2019, 11:07 AM
Post #26


Advanced Member
****

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



QUOTE(Christian J @ Apr 12 2019, 10:58 AM) *

QUOTE(RainLover @ Apr 12 2019, 05:14 PM) *

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


Advanced Member
****

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



QUOTE(pandy @ Apr 12 2019, 08:46 AM) *

Some find confirm boxes irritating.

They're useful if you use them right — just don't overdo it and let moderation be your guide! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 13 2019, 04:12 AM
Post #28


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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

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.
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
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:22 AM