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>
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.
find('input:text'). val(''); $('input:checkbox'). removeAttr('checked'); }); One will clear all text inputs.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With