过去两天我一直在调试这个表格而且我无法弄清楚发生了什么......! vars和表单ID似乎都检查每个文件,但是当我上传它时..我得到JS文件的错误代码“抱歉,'名称',有问题”。
有什么想法吗?
.HTML
<div class="col-md-6 padding-none">
<div class="box-white padding-all">
<h2 class="title-border right block-mobile">Contact Headquarters</h2>
<div class="data-form">
<input type="hidden" name="qualform" id="qualform" value="Headquarters">
<form action="post" name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6 col-md-6 col-md-12 col-md-12">
<label>Name</label>
<div class="form-field">
<i class="fa fa-user"></i>
<input type="text" class="form-control" name="name" placeholder="Enter your name" id="name" required>
</div>
</div>
<div class="col-md-6 col-md-6 col-md-12 col-md-12">
<label>Company</label>
<div class="form-field">
<i class="fa fa-building-o"></i>
<input type="text" class="form-control" name="company" placeholder="Enter your company" id="company" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-6 col-md-12 col-md-12">
<label>Telephone</label>
<div class="form-field">
<i class="fa fa-phone"></i>
<input type="tel" class="form-control" name="phone" placeholder="Enter your telephone" id="phone" required>
</div>
</div>
<div class="col-md-6 col-md-6 col-md-12 col-md-12">
<label>E-Mail</label>
<div class="form-field">
<i class="fa fa-envelope-o"></i>
<input type="email" class="form-control" name="email" placeholder="Enter your email" id="email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-6 col-md-12 col-md-12">
<label>Website</label>
<div class="form-field">
<i class="fa fa-globe"></i>
<input type="text" class="form-control" name="website" placeholder="Enter your website" id="website">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-xs-12 col-xs-12 col-xs-12">
<label>Message</label>
<div class="form-field">
<i class="fa fa-pencil-square-o"></i>
<textarea class="form-control" name="message" placeholder="Enter your message" id="message" required></textarea>
<div id="success"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-xs-12 col-xs-12 col-xs-12">
<button type="submit" class="btn btn-dark">SEND YOUR MESSAGE</button>
</div>
</div>
</form>
</div></div>
</div>
</div>
.JS
$(function() {
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $(".show input#name").val();
var company = $(".show input#company").val();
var email = $(".show input#email").val();
var phone = $(".show input#phone").val();
var website = $(".show input#website").val();
var message = $(".show textarea#message").val();
var qualform = $(".show input#qualform").val();
var firstName = name;
// For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: '../mail/contact_me.php',
type: "POST",
data: {
name: name,
company: company,
phone: phone,
email: email,
website: website,
message: message,
qualform: qualform,
},
cache: false,
success: function() {
// Success message
$('.show #success').html("<div class='alert alert-success'>");
$('.show #success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('.show #success > .alert-success')
.append(firstName + ", your e-mail was successfully sent.");
$('.show #success > .alert-success')
.append('</div>');
//clear all fields
$('.show #contactForm').trigger("reset");
},
error: function() {
// Fail message
$('.show #success').html("<div class='alert alert-danger'>");
$('.show #success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('.show #success > .alert-danger').append("<strong>Sorry, " + firstName + ", it seems like there is a problem. Please try again");
$('.show #success > .alert-danger').append('</div>');
//clear all fields
$('.show #contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('.show #success').html('');
});
.PHP
<?php
// sanitize
foreach ($_POST as $key => $value) {
if (ini_get('magic_quotes_gpc'))
$_POST[$key] = stripslashes($_POST[$key]);
$_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}
// Check for empty fields
if (empty($_POST['name']) || empty($_POST['company']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
echo "No arguments Provided!";
return false;
}
$name = $_POST['name'];
$company = $_POST['company'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$website = $_POST['website'];
$message = $_POST['message'];
$to = 'my.email@email.com';
$email_subject = "Contact from website website ($qualform)";
$email_body = "New form from $qualform.\n\n" . "User info:\n\nName: $name\n\nCompany: $company\n\nE-mail: $email\n\nTelephone: $phone\n\nWebsite: $website\n\nMessage: $message";
$headers = "From: Form website <my.email@email.com>\r\n";
mail($to, $email_subject, $email_body, $headers);
return true;
?>
谢谢!
答案 0 :(得分:0)
您试图从PHP代码中的变量$qualform
获取一个不存在的值,因此它会给您一个错误(这意味着一个错误的状态代码)然后触发错误函数在你的JS中。
尝试使用chrome more中的网络检查器,您将能够查看所有发回的数据的入站和出站请求。
我还建议使用像PHPStorm这样的文本编辑器突出显示语法错误或未解析的变量,并使用像xdebug这样的调试器来暂停代码以查看变量中的内容。