clear form values after submission ajax

Question

I am using the following script for validate my contact form.

//submission scripts   $('.contactForm').submit( function(){         //statements to validate the form            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;         var email = document.getElementById('e-mail');         if (!filter.test(email.value)) {             $('.email-missing').show();         } else {$('.email-missing').hide();}         if (document.cform.name.value == "") {             $('.name-missing').show();         } else {$('.name-missing').hide();}           if (document.cform.phone.value == "") {             $('.phone-missing').show();         }          else if(isNaN(document.cform.phone.value)){         $('.phone-missing').show();         }         else {$('.phone-missing').hide();}            if (document.cform.message.value == "") {             $('.message-missing').show();         } else {$('.message-missing').hide();}            if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "") || isNaN(document.cform.phone.value)){             return false;         }           if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {             //hide the form             //$('.contactForm').hide();              //show the loading bar             $('.loader').append($('.bar'));             $('.bar').css({display:'block'});          /*document.cform.name.value = '';         document.cform.e-mail.value = '';         document.cform.phone.value = '';         document.cform.message.value = '';*/              //send the ajax request             $.post('mail.php',{name:$('#name').val(),                               email:$('#e-mail').val(),                               phone:$('#phone').val(),                               message:$('#message').val()},              //return the data             function(data){                //hide the graphic               $('.bar').css({display:'none'});               $('.loader').append(data);              });              //waits 2000, then closes the form and fades out             //setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);              //stay on the page             return false;           }    }); 

This is my form

<form action="mail.php" class="contactForm" id="cform" name="cform" method="post">   <input id="name" type="text" value="" name="name" />   <br />   <span class="name-missing">Please enter your name</span>   <input id="e-mail" type="text" value="" name="email" />   <br />   <span class="email-missing">Please enter a valid e-mail</span>   <input id="phone" type="text" value="" name="phone" />   <br />   <span class="phone-missing">Please enter a valid phone number</span>   <textarea id="message" rows="" cols="" name="message"></textarea>   <br />   <span class="message-missing">Please enter message</span>   <input class="submit" type="submit" name="submit" value="Submit Form" /> </form> 

I need to clear the form field values after submitting successfully. How can i do this?

Answer 1

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

or in plain javascript:

document.getElementById("cform").reset(); 

Answer 2

You can do this inside your $.post calls success callback like this

$.post('mail.php',{name:$('#name').val(),                               email:$('#e-mail').val(),                               phone:$('#phone').val(),                               message:$('#message').val()},              //return the data             function(data){                //hide the graphic               $('.bar').css({display:'none'});               $('.loader').append(data);                //clear fields               $('input[type="text"],textarea').val('');              });