让我们从代码
开始PHP
<?php
$name = $_POST['name'];
$email = $_POST['EMAIL'];
$message = $_POST['Message'];
$subject = $_POST['subject'];
$to = 'email@example.com';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: EMAIL' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{
echo "Invalid Email, please provide an correct email.";
}
?>
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Responsive Bootstrap Landing Page Template">
<meta name="keywords" content="Bootstrap, Landing page, Template, Registration, Landing">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="author" content="Nick McNil">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="fonts/font-awesome.min.css" type="text/css" media="screen">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="css/material.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="navbar navbar-invers menu-wrap">
<div class="navbar-header text-center">
<a class="navbar-brand logo-right" href="javascript:void(0)"><img src="img/neslogo1.png" alt=""></i></a>
</div>
<ul id="navbar" class="nav navbar-nav main-navigation">
<ul id="navbar" class="nav navbar-nav main-navigation">
<li class="active"><a href="index.html"> </a></li>
<li><a href="#why"> </a></li>
<li><a href="past.html"> </a></li>
<li><a href="ceu.html"> </a></li>
<li><a href="arc.html"> </a></li>
<li><a href="current.html"> </a></li>
<li><a href="#contact"> </a></li>
</ul>
<button class="close-button" id="close-button">Close Menu</button>
</div>
<div class="content-wrap">
<header class="hero-area" id="home">
<div class="container">
<div class="col-md-12">
<div class="navbar navbar-inverse sticky-navigation navbar-fixed-top" role="navigation" data-spy="affix" data-offset-top="200">
<div class="container">
<div class="navbar-header">
<a class="logo-left " href="index.html"> </a>
</div>
<div class="navbar-right">
<button class="menu-icon" id="open-button">
<i class="mdi-navigation-menu"></i>
</button>
</div>
</div>
</div>
</div>
</header>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2 class="section-title">Contact Us</h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="info">
<div class="icon">
<i class="mdi-maps-map"></i>
</div>
<h4>Locations</h4>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="info">
<div class="icon">
<i class="mdi-content-mail"></i>
</div>
<h4>Email</h4>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="clear"></div>
<div class="col-md-6 col-sm-6">
<div class="info">
<div class="icon">
<i class="mdi-action-settings-phone"></i>
</div>
<h4></h4>
<p></p>
<p></p>
<h4></h4>
<p></p>
<h4></h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2 class="section-title">Love to Hear From You</h2>
<!-- Form -->
<form class="contact-form" method="post">
<i class="mdi-action-account-box"></i>
<input type="text" class="form-control" name="name" placeholder="Name">
<i class="mdi-content-mail"></i>
<input type="email" class="form-control" name="EMAIL" placeholder="Email">
<textarea class="form-control" placeholder="Message" rows="4"></textarea>
</form>
<!-- progress button -->
<div id="progress-button" class="progress-button">
<!-- button with text -->
<button><span>Submit</span></button>
<!-- svg circle for progress indication -->
<svg class="progress-circle" width="70" height="70">
<path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/>
</svg>
<!-- checkmark to show on success -->
<svg class="checkmark" width="70" height="70">
<path d="m31.5,46.5l15.3,-23.2"/>
<path d="m31.5,46.5l-8.5,-7.1"/>
</svg>
<!-- cross to show on error -->
<svg class="cross" width="70" height="70">
<path d="m35,35l-9.3,-9.3"/>
<path d="m35,35l9.3,9.3"/>
<path d="m35,35l-9.3,9.3"/>
<path d="m35,35l9.3,-9.3"/>
</svg>
</div>
<!-- /progress-button -->
</div>
</div>
</div>
</section>
<section id="footer">
<div class="container">
<div class="container">
<div id="footerimg" class="col-md-4 col-sm-4 wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<img src="nesfoot.jpg" class="img-responsive" alt="">
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Navigation</h3>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="ceu.html">Ceu Courses</a>
</li>
<li><a href="arc.html">Arc Flash Services</a>
</li>
<li><a href="current.html">Current Projects</a>
</li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>About</h3>
<ul>
<li><a href="#">Team</a>
</li>
<li><a href="current.html">Current Projets</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Go to Top Link -->
<a href="#home" class="btn btn-primary back-to-top">
<i class=" mdi-hardware-keyboard-arrow-up"></i>
</a>
</section>
<section id="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="copyright-text">
Copyright Here
</p>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.mmenu.min.all.js"></script>
<script src="js/count-to.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/main.js"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/smooth-on-scroll.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/classie.js"></script>
<script src="js/uiProgressButton.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
<script>
[].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) {
new UIProgressButton( bttn, {
callback : function( instance ) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
if( progress === 1 ) {
instance.stop( pos === 1 || pos === 3 ? -1 : 1 );
clearInterval( interval );
}
}, 150 );
}
} );
} );
</script>
</body>
</html>
因此，我最近为客户创建了一个联系我们表单，并将整个表单通过php提交给电子邮件。然后客户决定他想要一个动画按钮来确认或拒绝提交。我已经能够获得按钮继续提交php电子邮件。我的问题是他不希望页面重定向（目前它调用send.php）到php页面，而只是验证并确认由动画按钮发送。任何见解都将不胜感激。
EDITED **
所以我看了很多建议的修改，似乎仍然无法弄清楚这一点。以下是客户希望在网站http://tympanus.net/Tutorials/CircularProgressButton/上使用的按钮。我按照目前为止所有人的建议进行了编辑，当我合并编辑时，我的按钮退出了工作。我无法将其放在<form></form>标记中，因为它不会调用脚本并运行。在我看来，这些更改会导致页面刷新。我修改了提供的HTML以包含整个页面html。我知道它不干净;我还有一些整洁的事情要做。
所以回顾一下 客户希望动画按钮（svg动画）确认（绿色复选标记）或拒绝（红色X）表单提交。 没有重定向到send.php文件（但仍然有php发送电子邮件给他）。
尼克
答案 0 :(得分：1)
我同意这最好用AJAX实现。你不需要做太多简单的帖子：
添加到您的HTML文件：
<script type="text/javascript">
$(document).ready(function(){
// listen for the form submission
$('#form1').submit(function(event) {
// disallow browser form submissions
event.preventDefault();
// once submitted, put the form data into a serialized string
var formData = $('#form1').serialize();
$.ajax({
url: "php/send.php", // <-- your existing PHP file
type: 'POST',
data: formData,
success: function (data) {
// this is where you can initialize your animated button and feedback
$('#someElement').html(data); // <-- Your echoed PHP messages will be returned here
}
});
});
});
</script>
此示例使用jQuery，因为它是最简单的实现。如果项目中尚未使用，则需要在某处添加指向库的链接。
您的PHP文件
在HTML文件中设置完毕后，您只需调整相应的PHP文件即可接受POST数据。这应该与序列化数据一起使用：
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// set your variables from the post values
$name = $_POST["name"];
$email = $_POST["EMAIL"];
$message = $_POST["Message"];
// the rest of your php script goes here
}
此外，您的提交按钮不在表单标记内，并且无法正确引用表单。您需要移动表单或添加一些额外的脚本以使其正常工作，即
// inside the form
<button type="submit">Submit</button>
// outside the form
<button type="submit" id="sendMessage">Submit</button>
$("#sendMessage").click( function() {
$('#form1').submit();
});
其他一些说明和建议
答案 1 :(得分：0)
<script>
$(document).ready(function(){
$('#_btn').click(function() {
$('#_err').html(&&);
var e = $("#e").val;
var p = $("#p").val;
if(e == null || e == ''){
$('#_err').html('Email Required');
} else if(p == null || p == ''){
$('#_err').html('Password Required');
} else {
$.ajax({
type: "post",
url: "proccess.php",
data: $("#_form").serialize(),
success: function(response){
if(response == 'Success'){
$('#_err').html('Complete, Thank you!');
} else {
$('#_err').html('Error: '+response);
}
});
}
});
});
</script>
HTML
<form id="_form">
<input id="e" name="e" value="" placeholder="Email">
<input id="p" name="p" value="" placeholder="Password">
</form>
<button id="_btn">Send</button>
<div id="_err"></div>
<?php
$to = 'email@example.com';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: EMAIL' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if(mail($to, $subject, $message, $headers);){
echo "Success"; // success message
} else {echo 'Connection Error';}
}else{
echo "Invalid Email, please provide an correct email.";
}
?>
我添加以检查邮件是否实际发送。你也应该经常检查一下。我还添加了示例以确保字段不为空。这将节省服务器资源。 （您也应该检查服务器，有方法在客户端进行编辑。）