Results 1 to 9 of 9

Thread: Form onreset Event after the form reset

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Form onreset Event after the form reset

    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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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>
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Rain Lover (02-09-2014)

  4. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    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!

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    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>

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Thank you and John, anyway!

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (02-09-2014)

  11. #9
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    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!

Similar Threads

  1. Replies: 4
    Last Post: 01-10-2008, 04:57 AM
  2. One button to Save and Reset Form - Help
    By jpaulraj in forum JavaScript
    Replies: 1
    Last Post: 04-05-2007, 08:54 AM
  3. Form Select Menu onChange Event for Dates
    By wps in forum JavaScript
    Replies: 0
    Last Post: 08-22-2005, 12:08 PM
  4. reset form please help
    By nick120 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-15-2005, 10:49 PM
  5. Download File on form submit event
    By mandarsk in forum JavaScript
    Replies: 1
    Last Post: 11-18-2004, 06:37 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •