成功提交后未成功清除表单值/内容


unsuccessful clearing of form values/content after successful submission

每次我提交表单时,预期的重置函数都不会清除我的表单。请告诉我应该如何清除表单我的代码(HTML、PHP、JS(如下。

HTML代码:

<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="col-sm-5 col-sm-offset-1">
    <div class="form-group">
        <label>Name *</label>
        <input type="text" name="name" class="form-control" required="required">
    </div>
    <div class="form-group">
        <label>Email *</label>
        <input type="email" name="email" class="form-control" required="required">
    </div>
    <div class="form-group">
        <label>Phone</label>
        <input type="number" class="form-control">
    </div>
    <div class="form-group">
        <label>Company Name</label>
        <input type="text" class="form-control">
    </div>                        
</div>
<div class="col-sm-5">
    <div class="form-group">
        <label>Subject *</label>
        <input type="text" name="subject" class="form-control" required="required">
    </div>
    <div class="form-group">
        <label>Message *</label>
        <textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
    </div>                        
    <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
    </div>
</div>

Javascript代码如下:

jQuery(function($) {'use strict',
 ...... 
 ......
var form = $('#main-contact-form');
form.submit(function(event){
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
var form_status = $('<div class="form_status"></div>');
$.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: formData,
    beforeSend: function(){
        form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
    }
}).done(function(data){
    $("#main-contact-form")[0].reset();
    form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
    });
  });
 ......
 ......
 });

最后是我的PHP代码:

<?php
$status = array(
'type'=>'success',
'message'=>'Thank you for contacting us. As soon as possible  we will      contact you!'
);
$fail = array(
'type'=>'fail',
'message'=>'Please try again. Your mail could not be delivered!'
);  
$name = @trim(stripslashes($_POST['name'])); 
$email = @trim(stripslashes($_POST['email'])); 
$subject = @trim(stripslashes($_POST['subject'])); 
$message = @trim(stripslashes($_POST['message'])); 

$email_from = $email;
$email_to = 'email@mail.com';//replace with your email
$body = 'Name: ' . $name . "'n'n" . 'Email: ' . $email . "'n'n" . 'Subject: ' . $subject . "'n'n" . 'Message: ' . $message;
$success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
header('Content-type: application/json');
if($success){
    echo json_encode($status);
}
else{
    echo json_encode($fail);
}
?>

试试这个代码

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

我实际上缺少的一件重要的事情是,在从服务器输出获得的消息之前,我实际上使用了重置功能。查看上面的代码,会发现我的javascipt代码中有以下一行:

.done(function(data){
$("#main-contact-form")[0].reset();
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});

我将其更正为以下内容:

.done(function(data){
        form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
        $('#main-contact-form')[0].reset();
        //$('#main-contact-form').trigger("reset");
    });

非常感谢你们!