[英]HTML5 form is not sending
I am trying to send a mail with a contact form and php. 我正在尝试发送带有联系表和php的邮件。 Unfortunately it is not sending.
不幸的是它没有发送。 A little javascript hides the contact form and displays a message, unfortunately it's just stuck at loading
一个小小的javascript隐藏了联系表单并显示了一条消息,不幸的是它只是停留在加载中
My HTML 我的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>
Edit: My PHP 编辑:我的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);
?>
This is the JS for hiding the form 这是用于隐藏表单的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');
}
};
EDIT: And this is the snipped for the submit 编辑:这是提交的摘要
$('#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;
});
I really have no idea what I am missing here :( - any help is highly appreciated :) 我真的不知道我在这里缺少什么:(-非常感谢您的帮助:)
try: 尝试:
$name = $_POST['contact-name'];
$email = $_POST['contact-email'];
$message = $_POST['contact-message'];
$from = $_POST['contact-email'];
instead of: 代替:
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = $_POST['email'];
According to the jQuery Documentation $.serialize only serializes successful controls , thus not disabled controls. 根据jQuery文档, $ .serialize仅序列化成功的控件 ,因此不禁用控件。
Actually your form IS posted, just empty. 实际上,您的表格已发布,只是空的。
Simply invert disabling and posting in your code: 只需将禁用和发布代码反转即可:
$('#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;
});
Just before the first div Add 就在第一个div之前
That should work. 那应该工作。
form method="post" 形式method =“ post”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.