Form onreset Event after the form reset

**Rain Lover** · 02-08-2014, 07:39 PM

Here's a sample form:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Form onreset</title>
</head>

<body>
    <form onreset="myFunction();">
        <input type="text" name="fname">
        <input type="text" name="lname">
        <button type="reset" value="Reset">Reset</button>
    </form>
    <script>
        function myFunction() {
            alert("The form was reset!");
        }
    </script>
</body>

</html>

When I click the reset button, the form onreset event fires first, i.e. the alert message appears before resetting the form fields. How can it happen after the form fields rest?

**Beverleyh** · 02-08-2014, 09:08 PM

Maybe use a setTimeout method and change your form so the reset becomes a function fired onclick of a input reset?

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Form onreset</title>
</head>

<body>
    <form id="myForm">
        <input type="text" name="fname">
        <input type="text" name="lname">
        <input type="button" onclick="myFunction();" value="Reset">
    </form>
    <script>
        function myFunction() {
            document.getElementById("myForm").reset();
            setTimeout(function(){alert("The form was reset!")}, 1000);
        }
    </script>
</body>

</html>

**Rain Lover** · 02-09-2014, 03:27 AM

Originally Posted by Beverleyh

Maybe use a setTimeout method and change your form so the reset becomes a function fired onclick of a input reset?

Good idea! I'll give it a try.
Thanks!

**jscheuer1** · 02-09-2014, 04:18 AM

Or:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Form onreset</title>
</head>

<body>
    <form onreset="myFunction();">
        <input type="text" name="fname">
        <input type="text" name="lname">
        <button type="reset" value="Reset">Reset</button>
    </form>
    <script>
        function myFunction() {
            setTimeout(function(){alert("The form was reset!");}, 0);
        }
    </script>
</body>

</html>

**Rain Lover** · 02-09-2014, 05:06 AM

How about not using setTimeout?

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Form onreset</title>
</head>

<body>
    <form id="myForm">
        <input type="text" name="fname">
        <input type="text" name="lname">
        <button type="button" onclick="myFunction();">Reset</button>
    </form>
    <script>
        function myFunction() {
            document.getElementById("myForm").reset();
            alert("The form was reset!");
        }
    </script>
</body>

</html>

**Beverleyh** · 02-09-2014, 08:28 AM

That version (no setTimeout) didn't work when I was playing around on iPhone lastnight. The alert still fires first.

You've plucked out my interim test on the path to the setTimeout version though. From your original example, I logically thought "make the reset part of the function and put it after the alert" (like in your example), but that didn't work (not on iPhone anyway), so then I thought "what happens with a setTimeout on the alert?", which DID work, so that's the one I posted.

My brain stopped processing at that point. Saturday night TV was calling

I think with a bit more pondering I'd have worked around to John's example - "try the original form with setTimeout" - but I'd got far too distracted by the TV. LOL

**Rain Lover** · 02-09-2014, 09:54 AM

Thank you and John, anyway!

**jscheuer1** · 02-09-2014, 04:14 PM

What I would be thinking about is not whether there's a timeout or not. I would want to know, if javascript is unavailable, will the form still reset? And do I want it to? With the method from my previous post it will. With methods that depend solely upon form.reset() to reset the form, it will not.

**Rain Lover** · 02-09-2014, 06:14 PM

Originally Posted by jscheuer1

What I would be thinking about is not whether there's a timeout or not. I would want to know, if javascript is unavailable, will the form still reset? And do I want it to? With the method from my previous post it will. With methods that depend solely upon form.reset() to reset the form, it will not.

You're right. I'd better stick to type="reset".
Thanks for the pointer!