我使用cdn中的jquery 1.11和cdn中的jquery migrate 1.2.1来准备文档。 ajax是将表单值发送到位于同一目录中的文件“mail.php”,只是检查它是否通过ajax调用,然后抓取post变量并通过电子邮件发送它们。它不能是跨域问题。此外,下面的警报确认它正在获取输入值OK。这适用于ie10 +和所有其他浏览器。
但是,对于ie8 + 9 - 电子邮件发送给我空白..换句话说,帖子变量没有被收到?
$("#contactform").submit( function (e) {
e.returnValue=false;
e.preventDefault();
alert('form submitted');
if (checkValidation()) {
//if valid, send ajax
var name=$('#form-name').val();
var email=$('#form-email').val();
var contact_number=$('#form-contact-number').val();
var message=$('#form-message').val();
alert(name+email+contact_number+message);
$.ajax({
type: 'POST',
url: 'mail.php',
//data: JSON.stringify(parameters),
contentType: "json",
// data: $(this).serialize(),
data:{'name':name,'email':email,'contact_number':contact_number,'message':message},
dataType: "text",
cache: false,
success: function(data) {
// do something with ajax data
$('.form-response').css({color:'black',backgroundColor:'white',textAlign:'center'}).text('Thank you, we will contact you shortly.').show();
$('input').val('').trigger('blur');
$('textarea').val('').trigger('blur');
setTimeout(function(){
$('.form-response').hide();
scroll_to_top();
},3000);
},
error:function (xhr, ajaxOptions, thrownError){
console.log('error...', xhr);
//error logging
},
complete: function(){
//afer ajax call is completed
}
});
} else {
alert('Please re-enter your input and try again.');
$('input').val('');
$('textarea').val('');
$("input").trigger("blur");
$("textarea").trigger("blur");
$('#form-name').focus();
}
});
我在index.html上的表单如下:
<form class="form-style validate-form clearfix" id="contactform" action="mail.php" method="POST" role="form">
<div class="col-md-6"><div class="form-group"><input type="text" class="text-field form-control validate-field required" data-validation-type="string" id="form-name" placeholder="Full Name" name="name"></div>
<div class="form-group"><input type="email" class="text-field form-control validate-field required" data-validation-type="email" id="form-email" placeholder="Email Address" name="email"></div>
<div class="form-group"><input type="tel" class="text-field form-control validate-field phone" data-validation-type="phone" id="form-contact-number" placeholder="Contact Number" name="contact_number">
<input type="text" id="address-input" name="address" style="display: none!important;"></div></div><div class="col-md-6">
<div class="form-group"><textarea placeholder="Message..." id="form-message" class="form-control validate-field required" name="message"></textarea></div>
<div class="form-group"><button type="submit" id="submitBtn" class="btn btn-sm btn-outline-inverse">Submit</button></div></div>
</form>
我的mail.php:
<?php
if ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' )
{
# is ajax
if (empty($_POST["address"])) {
$from = $_POST["name"]; // sender
$subject = 'From: ' . $from;
$email = $_POST["email"];
$tel = $_POST["contact_number"];
$message = $_POST["message"];
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
$textToSend = 'From: ' . $from . "\n";
$textToSend .= 'Email: ' . $email . "\n";
$textToSend .= "Phone: " . $tel . "\n";
$textToSend .= 'Message: ' . $message . "\n";
// send mail
mail("contact@domain.net", $subject, $textToSend, "From: $from\n");
echo "Thank you, we will contact you shortly.";
echo '
<script>
$("input").val("");
$("textarea").val("");
setTimeout(function(){
scroll_to_top();
},3000);
</script>
';
} else {
echo 'Thank you, we will contact you shortly.';
echo '
<script>
$("input").val("");
$("textarea").val("");
setTimeout(function(){
scroll_to_top();
},3000);
</script>
';
}
}else{
header( 'Location: http://www.myhomepage.net' ) ;
die();
}
编辑::提出一个关于它的问题。我使用表单中的地址字段作为我的“蜜罐”方法..这基本上意味着如果字段地址(设置为显示无)是填写它..然后提交很可能是一个机器人,将被丢弃。