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

【问题标题】：unsuccessful clearing of form values/content after successful submission成功提交后未成功清除表单值/内容
【发布时间】：2016-08-05 12:27:08
【问题描述】：

每次我提交表单时，预期的重置功能都不会清除我的表单。请问我应该如何清除我的表单我的代码（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);
}
?>

【问题讨论】：

我强烈建议你停止使用@，而不是忽略错误或可能的错误，处理它们。
你不是已经发布了这个/类似的吗？ stackoverflow.com/q/38769155
我相信 form_status var 没有在“done”函数中定义......以防万一尝试在那里重新定义它......同时检查浏览器调试控制台是否有错误。
你的 Stealth 编辑添加下面的答案包含$("#main-contact-form")[0].reset(); 是可耻的。
I am getting blank email from php and js的可能重复

标签： php jquery html ajax forms

【解决方案1】：

试试这个代码

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

【讨论】：

糟糕！对不起，在我的代码中，我没有编辑它。但我只是这样做了。我的意思是，在将代码粘贴到此处之前，我之前已经使用过它，但是我有点忘了添加新版本 $("#main-contact-form")[0].reset();
试试这个 $('#formId').trigger("reset");
刚刚试了一下 ($('#formId').trigger("reset"); 还是没有清除我表单中的内容或值。
谢谢@Rax Shah 先生，我使用了你之前给我的两个功能，我发现我使用了错误的 ID 而不是我使用“main-contact-form”，它们都在工作$('#main-contact-form')[0].reset();和$('#main-contact-form').trigger("reset") 非常感谢你们。 Epodax、塞尔吉奥·贝尔纳多和弗雷德-ii。非常感谢
我实际上缺少的一件重要的事情是，在我从服务器输出获得的消息之前，我实际上使用了重置功能。如果您查看我上面的代码，这就是为什么我认为在调用函数 reset 时它没有重置表单的原因。

【解决方案2】：

我实际上缺少的一件重要的事情是，在我从服务器输出获得的消息之前，我实际上使用了重置功能。查看我上面的代码，你会发现我的 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");
    });

非常感谢你们！

【讨论】：