提交后清除表单字段

Question

I have read other answers for the same question but I am having problems and would be grateful for some advice. I have javaScript in my html file, and an Onclick() statement on the submit button to clear the form but now the email confirmation message does not come up and the message is no longer sent. If I put the onClick(); in the body of the form, every field is cleared just by clicking on a form field. I really want to be able to submit a message, then have the form cleared on successful send.

   <script type ="text/javascript"> 
            function clearform () {
 document.getElementById("name").value="";
 document.getElementById("email").value="";
 document.getElementById("subject").value="";
 document.getElementById("message").value="";
}
</script>

            <div class="row">
                <div class="col-sm-6">
                    <h2>Send us a message</h2>
                    <!-- action="replace it with active link."-->
                    <form action="contact.php" method="post" name="contact-form" id="contact-form" >
                        <label for="name">Your Name <span>*</span></label>
                        <input type="text" name="name" id="name" value="" required />
                        <label for="email">Your E-Mail <span>*</span></label>
                        <input type="text" name="email" id="email" value="" required />
                        <label for="subject">Subject</label>
                        <input type="text" name="subject" id="subject" value="" />
                        <label for="message">Your Message</label>
                        <textarea name="message" id="message"></textarea>
                        <div class="row">
                            <div class="col-sm-6">
                                <input type="submit" name="sendmessage" id="sendmessage" value="Submit" onclick="clearform();" />
                            </div>
                            <div class="col-sm-6 dynamic"></div>
                        </div>
                        </form>

I then have the following in the PHP file:

    private function sendEmail(){
    $mail = mail($this->email_admin, $this->subject, $this->message,
         "From: ".$this->name." <".$this->email.">\r\n"
        ."Reply-To: ".$this->email."\r\n"
    ."X-Mailer: PHP/" . phpversion());

    if($mail)
    {
        $this->response_status = 1;
        //$this->response_html = '<p>Thank You!</p>';
    }
}


function sendRequest(){
    $this->validateFields();
    if($this->response_status)
    {
        $this->sendEmail();
    }

    $response = array();
    $response['status'] = $this->response_status;   
    $response['html'] = $this->response_html;

    echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span>";
    header("Location: contact.php");// redirect back to your contact form
    exit;


   }

}


$contact_form = new Contact_Form($_POST, $admin_email, $message_min_length);
$contact_form->sendRequest();

?>

Answer 1

You've got to make sure the event continues to propagate and the form is submitted:

function clearform () {
    document.getElementById("name").value="";
    document.getElementById("email").value="";
    document.getElementById("subject").value="";
    document.getElementById("message").value="";
    return true;
}

Answer 2

No ajax form post

If you are not using ajax to submit the form (you don't seem to be using it), there is no need for javascript to clear the form, the form will be reloaded on submit and it will be empty.

However, you have a problem with your location redirect: You are outputting html before that so the redirect will probably fail.

You should not output anything before you redirect and you could add a query variable to the url so that you can show your success message when the form loads:

if($this->response_status)
{
    $this->sendEmail();
}

header("Location: contact.php");// redirect back to your contact form
exit;

Using ajax to post the form

If you are using ajax (the setting of your response variables seems to indicate that you want to do that), you should put the clearform () call in the success function of your ajax call and remove the header() redirect in php. Instead you probably want to return / output the results:

if($this->response_status)
{
    $this->sendEmail();
}

$response = array();
$response['status'] = $this->response_status;   
$response['html'] = $this->response_html;

echo json_encode($response);
exit;