Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clear form after submission with jQuery

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> 
like image 858
Kelbizzle Avatar asked Jan 02 '12 14:01

Kelbizzle


People also ask

How do I clear a form after submitting?

To clear all form fields after submitting: Add a submit event listener on the form element. When the form is submitted, call the reset() method on the form. The reset method restores the values of the input fields to their default state.

How remove textbox value after submit in jQuery?

find('input:text'). val(''); $('input:checkbox'). removeAttr('checked'); }); One will clear all text inputs.

How do you clear form data after submit in Ajax?

getElementById("form_id"). reset(); You can call this in ajax success method. so once your ajax call will be success it will reset the form.


1 Answers

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.

like image 68
Andrew Jackman Avatar answered Sep 20 '22 14:09

Andrew Jackman