Reset Form after captcha validation in ajax jquery

Question

<?php
session_start();
if($_POST["captcha"]==$_SESSION["captcha_code"]){
    $email_to = "123@gmail.com";
    $email_subject = "Mail from  contact form";



    $name = $_POST['name']; // required
    $topic = $_POST['topic']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['phone']; // not required
    $message = $_POST['message']; // required



    $email_message = "Form details below.\n\n";


    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }



    $email_message .= "Name: ".clean_string($name)."\n";
    $email_message .= "Email From : ".clean_string($email_from)."\n";
    $email_message .= "Contact no: ".clean_string($telephone)."\n";
    $email_message .= "Regarding: ".clean_string($topic)."\n";
    $email_message .= "message: ".clean_string($message)."\n";

// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);

echo "<p class='success'>Your message has been sent. Thank you!</p>";
} else {
print "<p class='Error'>Enter Correct Captcha Code.</p>";
}
?>

This is returned from my php file after the capthca is checked.

This is my script in another file. After the capthca validation in php it returns the html data. I need to reset the form after successful validation.

function sendContact() {
    var valid;  
    valid = validateContact();
    if(valid) {
        jQuery.ajax({
        url: "contact_mail.php",
        data:'name='+$("#name").val()+'&email='+$("#email").val()+'&phone='+$("#phone").val()+'&topic='+$("#topic").val()+'&message='+$("#message").val()+'&captcha='+$("#captcha").val(),
        type: "POST",
        success:function(data){

        $("#mail-status").html(data);       
        },
        error:function (){}
        });
    }
}

I tried this

success:function(data){

        $("#mail-status").html(data);

        $("#name").val('');
        $("#email").val('');
        $("#phone").val('');
        $("#topic").val('');
        $("#message").val('');
        $("#captcha").val('');
        $("#captcha_code").attr('src','captcha_code.php');

        }       
        },
        error:function (){}
        });

But it resets even when the capthca is wrong. Means any reply from php the form get resets. Any solutions

Answer 1

try this code-

<?php
session_start();
if($_POST["captcha"] == $_SESSION["captcha_code"]) {
    $email_to = "123@gmail.com";
    $email_subject = "Mail from  contact form";

    $name = $_POST['name']; // required
    $topic = $_POST['topic']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['phone']; // not required
    $message = $_POST['message']; // required

    $email_message = "Form details below.\n\n";

    function clean_string($string) {
        $bad = array("content-type","bcc:","to:","cc:","href");
        return str_replace($bad,"",$string);
    }

    $email_message .= "Name: ".clean_string($name)."\n";
    $email_message .= "Email From : ".clean_string($email_from)."\n";
    $email_message .= "Contact no: ".clean_string($telephone)."\n";
    $email_message .= "Regarding: ".clean_string($topic)."\n";
    $email_message .= "message: ".clean_string($message)."\n";

    // create email headers
    $headers = 'From: '.$email_from."\r\n".
    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);

    echo json_encode("success" => "Your message has been sent. Thank you!");
} else {
    echo json_encode("error" => "Enter Correct Captcha Code");
}
?>

and in ajax success (use dataType json)-

dataType: 'json',
success:function(data){
        if(data.success){
            $("#form-id").trigger("reset");
        }elseif(data.error){
            alert(data.error);
        }

        error:function (){}
    });

Answer 2

Try This:

function sendContact() {
    var valid;  
    valid = validateContact();
    if(valid) {
        jQuery.ajax({
        url: "contact_mail.php",
        data:$("#form_id").serialize(),
        type: "POST",
        success:function(data){
        $('#form_id').trigger("reset");
        $("#mail-status").html(data);       
        },
        error:function (){}
        });
    }
}

Answer 3

Try this code :

 $("#form-id")[0].reset();