Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21433 > unrolled thread

Reset not working when I use addEventListener

Back to article view | Back to comp.lang.javascript

Contents

  Reset not working when I use addEventListener "Tony Johansson" <johansson.andersson@telia.com> - 2013-09-26 12:08 +0200
    Re: Reset not working when I use addEventListener "Tony Johansson" <johansson.andersson@telia.com> - 2013-09-26 12:17 +0200
      Re: Reset not working when I use addEventListener "Tony Johansson" <johansson.andersson@telia.com> - 2013-09-26 12:34 +0200
    Re: Reset not working when I use addEventListener "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-09-26 12:39 +0200
    Re: Reset not working when I use addEventListener Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-26 20:47 +0200

#21433 — Reset not working when I use addEventListener

Hello!

This works when I click the reset button in the form the confirm dialog in 
showReset is displayed.
If I click OK the fields in the form is cleared and if I click cancel the 
fields is not cleared. So far so good.
<body>
      <form id = "myForm" action = "#">
      ...
            <input id="reset" type="reset" value="Reset" onclick="return 
showReset();"/>
      </form>
</body>

<script type="text/javascript">
          function showReset(e)
          {
              return confirm("Do you really want to reset the form?");
          }
</script>

But this doesn't work. When I click the reset button in the form the 
anonymous function is called returning true if I click OK or false if I 
click cancel.
The only difference is that in the one that is working I have in the onclick 
attribute ="return showReset();"
So even if I click cancel the fields is cleared in this not working version
So what do I have to add to make this verion working ?

<body>
      <form id = "myForm" action = "#">
      ...
            <input id = "reset" type = "reset">
      </form>
</body>

<script type="text/javascript">
   myForm.addEventListener( "reset",
      function()
      {
         return confirm( "Are you sure you want to reset?" );
      },
      false );
</script>

//Tony 

[toc] | [next] | [standalone]

#21435

This statement var myForm = document.getElementById( "myForm" );
is not added in the passed code but I have it in the running code.
I mentioned this so you don't think I have missed it.

"Tony Johansson" <johansson.andersson@telia.com> skrev i meddelandet 
news:l2112k$cqv$1@dont-email.me...
> Hello!
>
> This works when I click the reset button in the form the confirm dialog in 
> showReset is displayed.
> If I click OK the fields in the form is cleared and if I click cancel the 
> fields is not cleared. So far so good.
> <body>
>      <form id = "myForm" action = "#">
>      ...
>            <input id="reset" type="reset" value="Reset" onclick="return 
> showReset();"/>
>      </form>
> </body>
>
> <script type="text/javascript">
>          function showReset(e)
>          {
>              return confirm("Do you really want to reset the form?");
>          }
> </script>
>
> But this doesn't work. When I click the reset button in the form the 
> anonymous function is called returning true if I click OK or false if I 
> click cancel.
> The only difference is that in the one that is working I have in the 
> onclick attribute ="return showReset();"
> So even if I click cancel the fields is cleared in this not working 
> version
> So what do I have to add to make this verion working ?
>
> <body>
>      <form id = "myForm" action = "#">
>      ...
>            <input id = "reset" type = "reset">
>      </form>
> </body>
>
> <script type="text/javascript">
>   myForm.addEventListener( "reset",
>      function()
>      {
>         return confirm( "Are you sure you want to reset?" );
>      },
>      false );
> </script>
>
> //Tony 

[toc] | [prev] | [next] | [standalone]

#21436

I found the reason I must change false to true in this event handler.
myForm.addEventListener( "reset",
>>      function()
>>      {
>>         return confirm( "Are you sure you want to reset?" );
>>      },
>>      false );

//tony

"Tony Johansson" <johansson.andersson@telia.com> skrev i meddelandet 
news:l211jv$fem$1@dont-email.me...
> This statement var myForm = document.getElementById( "myForm" );
> is not added in the passed code but I have it in the running code.
> I mentioned this so you don't think I have missed it.
>
> "Tony Johansson" <johansson.andersson@telia.com> skrev i meddelandet 
> news:l2112k$cqv$1@dont-email.me...
>> Hello!
>>
>> This works when I click the reset button in the form the confirm dialog 
>> in showReset is displayed.
>> If I click OK the fields in the form is cleared and if I click cancel the 
>> fields is not cleared. So far so good.
>> <body>
>>      <form id = "myForm" action = "#">
>>      ...
>>            <input id="reset" type="reset" value="Reset" onclick="return 
>> showReset();"/>
>>      </form>
>> </body>
>>
>> <script type="text/javascript">
>>          function showReset(e)
>>          {
>>              return confirm("Do you really want to reset the form?");
>>          }
>> </script>
>>
>> But this doesn't work. When I click the reset button in the form the 
>> anonymous function is called returning true if I click OK or false if I 
>> click cancel.
>> The only difference is that in the one that is working I have in the 
>> onclick attribute ="return showReset();"
>> So even if I click cancel the fields is cleared in this not working 
>> version
>> So what do I have to add to make this verion working ?
>>
>> <body>
>>      <form id = "myForm" action = "#">
>>      ...
>>            <input id = "reset" type = "reset">
>>      </form>
>> </body>
>>
>> <script type="text/javascript">
>>   myForm.addEventListener( "reset",
>>      function()
>>      {
>>         return confirm( "Are you sure you want to reset?" );
>>      },
>>      false );
>> </script>
>>
>> //Tony
> 

[toc] | [prev] | [next] | [standalone]

#21437

Tony Johansson wrote on 26 sep 2013 in comp.lang.javascript:
[..]
> But this doesn't work. 

===============================
<form>
  <input>
  <input type="reset" value="Reset me" onclick="return showReset();">
</form>

<script type="text/javascript">
  function showReset() {
    return confirm("Do you really want to reset the form?");
  };
</script>
===============================

This works fine here, tested on Chrome. 
Perhaps you were not showing your real test code.
[please cleare all unnecessary elements of your code, 
when showing it here.]

> When I click the reset button in the form the 
> anonymous function is called returning true if I click OK or false if I 
> click cancel.

What "anonymous" function?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#21438

Tony Johansson wrote:

> This works when I click the reset button in the form […]

<http://www.nngroup.com/articles/reset-and-cancel-buttons/>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web