Clear form after submission with jQuery

Question

What's the easiest way to clear this form after refresh. The way I have tried will clear the form but not submit to the database. Could someone else explain to me the best way to do this.

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $("#newsletterform").validate({
            debug: false,
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('newsletter.php', $("#newsletterform").serialize(), function(data) {
                    $('#results').html(data);
                });

            }

        });
    });

    </script>

</head>

<div id="content">
    <div id="newsletter-signup">
        <h1>Sign up for News, Updates, and Offers!</h1>
        <form id="newsletterform" action="" method="post">

            <fieldset>

                <ul>
                    <li>
                        <label for="name">Name:</label>
                        <input type="text" name="name" />
                    </li>
                    <li>
                        <label for="email">Email:</label>
                        <input type="text" name="email" />  
                    </li>
                        <div id="results"><div>
                    <li>
                        <input type="submit" value="submit" name="signup" onclick="" />         
                    </li>
                </ul>

            </fieldset>

        </form>         
    </div>
</div>
</html>

score 88 · Accepted Answer · answered Jan 02 '12 at 14:16

88

You can add this to the callback from $.post

$( '#newsletterform' ).each(function(){
    this.reset();
});

You can't just call $( '#newsletterform' ).reset() because .reset() is a form object and not a jquery object, or something to that effect. You can read more about it here about half way down the page.

answered Jan 02 '12 at 14:16

Andrew Jackman

13,781
7
35
44

Thank you this worked. My mistake was I didn't realize I was placing it in the wrong location. Thank you for actually explaining your answer. – Kelbizzle Jan 02 '12 at 18:14
1

Have a look at the next answer before implementing this. – IMLiviu Oct 05 '13 at 00:02
1

@IMLiviu The below answer doesn't match this question's needs. That is for a multi-stage form. Also, the read more link says not to use that code, but a second piece of code provided in the answer. – Andrew Jackman Oct 05 '13 at 15:35

score 37 · Answer 2 · edited Feb 24 '16 at 09:00

37

You can reset your form with:

$("#myform")[0].reset();

edited Feb 24 '16 at 09:00

Remi Guan

21,506
17
64
87

answered Jan 03 '12 at 11:50

Amritpal singh

855
5
12
27

what is the use of [0], here? – Sourabh Oct 28 '15 at 11:33
5

Using [0] will return you native html element not DOM. – Amritpal singh Nov 01 '15 at 05:39

kiran kumar · Answer 3 · 2016-02-23T10:34:00.417

14

Better way to reset your form with jQuery is Simply trigger a reset event on your form.

$("#btn1").click(function () {
        $("form").trigger("reset");
    });

edited Feb 23 '16 at 10:34

answered Feb 22 '16 at 13:22

kiran kumar

1,402
17
34

1

A few details to explain what you are doing here would be appreciated. – skypjack Feb 22 '16 at 20:17

score 1 · Answer 4 · edited May 23 '17 at 11:55

1

try this in your post methods callback function

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

for more info read this

edited May 23 '17 at 11:55

Community

1
1

answered Jan 02 '12 at 14:12

Dau

8,578
4
23
48

score 1 · Answer 5 · answered Jan 02 '12 at 15:06

1

Propably this would do it for you.

 $('input').val('').removeAttr('checked').removeAttr('selected');

answered Jan 02 '12 at 15:06

mas-designs

7,498
1
31
56

score 0 · Answer 6 · answered Sep 25 '19 at 09:46

0

A quick reset of the form fields is possible with this jQuery reset function. $(selector)[0].reset();

answered Sep 25 '19 at 09:46

Jerry King

454
4
6

Harshit Khatri · Answer 7 · 2013-01-19T12:02:50.667

-3

Just add this to your Action file in some div or td, so that it comes with incoming XML object

    <script type="text/javascript">
    $("#formname").resetForm();
    </script>

Where "formname" is the id of form you want to edit

edited Jan 19 '13 at 12:02

answered Jan 07 '13 at 19:00

Harshit Khatri

5
1

Clear form after submission with jQuery

7 Answers7

Linked

Related