Question

每次我提交表单时，预期的重置功能都不会清除我的表单。请问我应该如何清除我的表单，我的代码（HTML，PHP，JS）如下所示。

HTML code：

<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);
}
?>

Answer 1

试试此代码

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

Answer 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");
    });

非常感谢你！

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

2 个答案: