Блог

У меня есть небольшая контактная форма. Отправка сообщений работает, но форма остается с текстом после отправки. Я искал и пробовал какой-то код, чтобы очистить его, но безуспешно.

 // JavaScript Document
$('#contact-form').submit(function (e) {
"use strict";
e.preventDefault();
$.ajax({
    type: "POST",
    url: "contactform.php",
    data: $(this).serialize(), //get form values
    sucess: function (data) {
        document.getElementById("contact-form").reset();
    }

}).done(function (data) {
    console.log(data); // will contain success or invalid 
});
});
  

И немного php

 <?php
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$message = $_POST["message"];

$EmailTo = "marcin@rmonline.com";
$Subject = "New Message Received";

// prepare email body text
$email_content .= "Firstname: $firstnamen";
$email_content .= "Lastname: $lastnamen";
$email_content .= "Email: $emailn";
$email_content .= "Phone: $phonen";
$email_content .= "Message: $message";

// send email
$success = mail($EmailTo, $Subject, $email_content, "From:".$email);

// redirect to success page
if ($success){

    echo "success";

} else {
    echo "invalid";
} 
?>
  

И html

 <form id="contact-form" method="post" action="contactform.php" role="form">
  <div class="messages"></div>
  <div class="form-group">
    <input id="form_name" type="text" name="firstname" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <input id="form_lastname" type="text" name="lastname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <textarea id="form_message" name="message" class="form-control" placeholder="Message for us *" rows="4" required data-error="Please,leave us a message."></textarea>
    <div class="help-block with-errors"></div>
  </div>
  <button type="submit" class="btn" value="Send message">Send Message</button>
  <p class="text-muted"><strong>*</strong> These fields are required.</p>
</form>
  

У меня такое чувство, что я что-то упускаю, но пока не знаю, что.

Попробуйте удалить preventDefault. Форма опустеет после перезагрузки страницы. Это или вам придется вручную установить значение входных данных формы на пустое.

Есть ли особая причина, по которой вы отправляете форму с помощью ajax и не разрешаете отправлять форму непосредственно в файл php?