HTML5表单未发送

Question

我正在尝试发送带有联系表和php的邮件。 不幸的是它没有发送。 一个小小的javascript隐藏了联系表单并显示了一条消息，不幸的是它只是停留在加载中

我的HTML

 <form id="contact-form" class="form-horizontal" method="post" action="form.php">
          <div class="form-group">
                <input type="text" class="form-control" id="contact-name" name="contact-name" placeholder="Name">
                <input type="email" class="form-control" id="contact-email" name="contact-email" placeholder="Email">
          </div>

          <div class="form-group">
                <input type="text" class="form-control" id="contact-subject" name="contact-subject" placeholder="Subject">
                <input id="human" type="text" class="form-control" name="human" placeholder="1+3=?">
          </div>

                <div class="form-group">
                <textarea class="form-control" rows="8" id="contact-message" name="contact-message" placeholder="Message"></textarea>
          </div>

          <div class="form-group">
                <input type="submit" class="btn btn-default btn-lg" id="submit" name="submit" value="Send" formaction="form.php">
          </div>
          </form>

编辑：我的PHP

<?php
$name = $_POST['contact-name'];
$email = $_POST['contact-email'];
$message = $_POST['contact-message'];
$from = $_POST['contact-email'];
$to = 'mail@domain.com'; // insert your Mail here
$subject = 'Hello';
$human = $_POST['human'];
$resp = null;
$body = "From: $name\n E-Mail: $email\n Message:\n $message";

$headers = "From: $email" . "\r\n" .
"Reply-To: $email" . "\r\n" .
"X-Mailer: PHP/" . phpversion();

if ($human == '4') { // edit the number 4 if you want anoter anti spam question          
    if (mail ($to, $subject, $body, $from)) { 
        $resp = array(
            "status" => "OK",
            "msg" => "Thanks! We will reply shortly."
        );
    } else {
        $resp = array(
            "status" => "ERROR",
            "msg" => "Something went wrong, go back and try again"
        );
    }
} else if ($human != '4') {
    $resp = array(
        "status" => "ERROR",
        "msg" => "Wrong antispam answer!"
    );
}

header('Content-Type: application/json');
print json_encode($resp);
?>

这是用于隐藏表单的JS

$.fn.formAlert = function (resp) {
if (resp && resp.msg) {
  this.html(resp.msg);
}

if (resp && resp.status) {
  if (resp.status === 'OK') {
    this.attr('class', 'alert alert-success');
  } else {
    this.attr('class', 'alert alert-danger');
  }
} else {
  this.attr('class', 'hidden');
}
};

编辑：这是提交的摘要

 $('#contact-form').submit(function (e) {
  var $this = $(this),
    url = $this.attr('action');

  e.preventDefault();

  //disable any further form interaction
  $this
    .find(':input')
    .attr('disabled', 'disabled')
    .filter('[type=submit]') //get the submit button
      .hide() //hide it
      .after('<div class="loader"></div>'); //add a loader after it

  $.post(url, {
    data: $this.serialize(),
    dataType: 'json',
    success: function (resp) {
      $('#contact-form-msg').formAlert(resp);
    }
  });
  return false;
});

我真的不知道我在这里缺少什么:(-非常感谢您的帮助:)

Answer 1

尝试：

$name = $_POST['contact-name'];
$email = $_POST['contact-email'];
$message = $_POST['contact-message'];
$from = $_POST['contact-email']; 

代替：

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = $_POST['email'];

---

Answer 2

根据jQuery文档， $ .serialize仅序列化成功的控件 ，因此不禁用控件。

实际上，您的表格已发布，只是空的。

只需将禁用和发布代码反转即可：

$('#contact-form').submit(function (e) {
  var $this = $(this),
    url = $this.attr('action');

  e.preventDefault();

  $.ajax( { url: url,
    data: $this.serialize(), type: 'post',
    dataType: 'json',
    success: function (resp) { console.log(resp);
      $('#contact-form-msg').formAlert(resp); 
    }
  });

  //disable any further form interaction
  $this
    .find(':input')
    .attr('disabled', 'disabled')
    .filter('[type=submit]') //get the submit button
      .hide() //hide it
      .after('<div class="loader"></div>'); //add a loader after it
  return false;
});

Answer 3

就在第一个div之前

那应该工作。

形式method =“ post”