Clear PHP Form after submission

Question

O.k I have seen similar questions but can't seem to make it work. I would like that when the form is submitted the fields get cleared.

This is my PHP:

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "EMAIL ADDRESS";
$subject = "Unriddle contact form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo '<p style="margin-top: 1em; font-color: #66CC00;">Thank you!</p>'; ?>

This my HTML:

<form action="mail.php" method="post">
<a class="form-row">
  <p>Name</p>
  <input id="iname" type="text" class="text-input required default" name="name" value="" />
</a>
<a class="form-row">
  <p>Email</p>
  <input id="email" type="text" class="text-input required email default" name="email" value="" />
</a>
<a class="form-row">
  <p>Message</p>
  <textarea id="message" class="text-area" name="message" cols="40" rows="8"></textarea>
</a>
<br />
<input class="btn-submit" type="submit" value="Send" name="submit" />

This is my JS

jQuery(document).ready(function($) {
var $loading = $('<div class="loading"><img src="/js/loading.gif" alt="" /></div>');
$(".default").each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
        if ($(this).val() == defaultVal){
            $(this).removeClass('active').val('');
        }
    });
    $(this).blur(function() {
        if ($(this).val() == ''){
            $(this).addClass('active').val(defaultVal);
        }
    })
    .blur().addClass('active');
});
$('.btn-submit').click(function(e){
    var $formId = $(this).parents('form');
    var formAction = $formId.attr('action');
    defaulttextRemove();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('li',$formId).removeClass('error');
    $('span.error').remove();
    $('.required',$formId).each(function(){
        var inputVal = $(this).val();
        var $parentTag = $(this).parent();
        if(inputVal == ''){
            $parentTag.addClass('error').append('<span class="error">Required field</span>');
        }
        if($(this).hasClass('email') == true){
            if(!emailReg.test(inputVal)){
                $parentTag.addClass('error').append('<span class="error">Enter a valid email address</span>');
            }
        }
    });
    if ($('span.error').length == "0") {
        $formId.append($loading.clone());
        $('fieldset',$formId).hide();
        $.post(formAction, $formId.serialize(),function(data){
            $('.loading').remove();
            $formId.append(data).fadeIn();
        });
    }
    e.preventDefault();
});
});

function defaulttextRemove(){
$('.default').each(function(){
    var defaultVal = $(this).attr('title');
    if ($(this).val() == defaultVal){
        $(this).val('');
    }
});

}

Is there a simple way of doing this ? What line of code do I need to add and where ? If you can help me that would be great, but please be specific as to where I should add the line of code.

Power to you! Thanks

Answer 1

Add reset on success of your ajax request or if you want to clear every time on submit add at the end .

if ($('span.error').length == "0") {
        $formId.append($loading.clone());
        $('fieldset',$formId).hide();
        $.post(formAction, $formId.serialize(),function(data){
            $('.loading').remove();
            $formId.append(data).fadeIn();
            $formId.reset();// to reset
        });
    }