我创建了一个联系表单，该表单将通过ajax PHP进行验证，然后使用PHP通过电子邮件发送。
当我单击提交时，而不是执行PHP脚本并进行验证，该页面会在新页面上重新加载：
mypage.com/form_process.php
此外，它不会加载样式表。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src= "https//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<?php include('form_process.php'); ?>
<link rel="stylesheet" type="text/css" href="form.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script>
$(document).ready(function) {
$("form").submit(function(event) {
event.preventDefault();
var name = $("name").val();
var email = $("email").val();
var signature = $("signature").val();
$(".form-message").load("form_process.php", {
name: name,
email: email,
signature: signature
});
});
});
</script>
</head>
<body>
<div id="contact-form">
<form method="post" action="form_process.php" method="POST" name="pdf-download">
<div class="podrecieved">
<h3>Recieved by<h3>
</div>
<div class="form-group col-xs-12">
<label for="firstname">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="John Doe">
</div>
<div class="form-group col-xs-12">
<label for="email_id">Email address:</label>
<input type="email_id" class="form-control" id="email" name="email" placeholder="john@company.com">
</div>
<div>
<label for="messages">
<span class="required">Additional Comments:</span>
<textarea id="messages" name="messages" placeholder="Please write your thougths here." tabindex="5"></textarea>
</label>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<h3>Click to sign</h3>
<input type="text" id="txt" name="signature" style="border-radius: 5px;">
</div>
</div>
</div>
</div>
</div>
<div id="editor"></div>
<button name="submit" type="submit" id="submit">Submit</button>
<p class="form-message"></p>
</form>
</div>
</body>
</html>
form_process.php
<?php
if(isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$signature = $_POST['signature'];
$message = $_POST['messages'];
$company = $_POST['company'];
$ErrorEmpty = false;
$ErrorEmail = false;
if (empty($name) || empty($email) || empty($signature)){
echo "<span class='form-error'>Please fill in required fields</span>";
$ErrorEmpty = true;
}
elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>Please fill in a valid email address</span>";
$ErrorEmail = true;
}
else {
echo "<span class='form-success'>Please fill in a valid email address</span>";
}
}
else{
echo "There was an Error!";
}
$mailto = "contact@email.co.uk";
$headers = "from:".$company;
$txt = "Your Proof of delivery was signed for by:".$name;
mail($mailto, $headers, $txt );
header("location: index.php?POD_sent");
?>
<script>
$("#name, #email, #txt").removeClass(input-error);
var ErrorEmpty = "<?php echo $ErrorEmpty; ?>";
var ErrorEmail = "<?php echo $ErrorEmail; ?>";
if(ErrorEmpty == true) {
$("#name, #email, #txt").addClass("input-error");
}
if(ErrorEmail == true) {
$("#email").addClass("input-error");
}
if(ErrorEmpty == false && ErrorEmail == false) {
$("#name, #email, #txt").val("")
}
</script>
我看不到这段代码出了什么问题。与其打开指向form_process.php的新链接，不如使用form_process.php进行验证然后发送表单。
我收到错误消息时似乎正在调用form_process.php-从行There was an Error!的{{1}}
所以我假设错误来自此工作表else{
echo "There was an Error!";
}
答案 0 :(得分：0)
尝试一下：包括您自己的验证和流程：
Your form_process.php
<?php
if(isset($_POST['action']) && !empty($_POST['action'])){
$name = $_POST['name'];
$email = $_POST['email'];
$signature = $_POST['signature'];
$message = $_POST['messages'];
// $company = $_POST['company'];
$ErrorEmpty = false;
$ErrorEmail = false;
if (empty($name) || empty($email) || empty($signature)){
echo "<span class='form-error'>Please fill in required fields</span>";
$ErrorEmpty = true;
}
elseif(!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
echo "<span class='form-error'>Please 1fill in a valid email address</span>";
$ErrorEmail = true;
}
else {
echo "<span class='form-success'>Sucess!!</span>";
}
}
?>
index.php<?php include('form_process.php'); ?>
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="form.css">
<link rel="stylesheet" href="bootstrap.min.css" crossorigin="anonymous">
<script>
$(document).ready(function(){
$("#frm1").submit(function(event) {
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var signature = $("#signature").val();
var messages = $("#messages").val();
$.ajax({
url:"form_process.php",
type:"POST",
data: { name: name, email :email, signature:signature,messages:messages,action:"process"} ,
success:function(response) {
$(".form-message").html(response);
},
error:function(){
alert("error");
}
});
});
});
</script>
</head>
<body>
<div id="contact-form">
<form id="frm1" action="form_process.php" method="POST" >
<div class="podrecieved">
<h3>Recieved by<h3>
</div>
<div class="form-group col-xs-12">
<label for="firstname">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="John Doe">
</div>
<div class="form-group col-xs-12">
<label for="email_id">Email address:</label>
<input type="email_id" class="form-control" id="email" name="email" placeholder="john@company.com">
</div>
<div>
<label for="messages">
<span class="required">Additional Comments:</span>
<textarea id="messages" name="messages" placeholder="Please write your thougths here." tabindex="5"></textarea>
</label>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<h3>Click to sign</h3>
<input type="text" id="signature" name="signature" style="border-radius: 5px;">
</div>
</div>
</div>
</div>
</div>
<div id="editor"></div>
<button name="submit" type="submit" id="submit">Submit</button>
<p class="form-message"></p>
</form>
</div>
</body>
</html>