Question

让我们从代码

开始

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发送电子邮件给他）。

尼克

Answer 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();
});

其他一些说明和建议

正确清理用户输入
在客户端和/或PHP

Answer 2

<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.";
}
?>

我添加以检查邮件是否实际发送。你也应该经常检查一下。我还添加了示例以确保字段不为空。这将节省服务器资源。（您也应该检查服务器，有方法在客户端进行编辑。）

表单按钮提交无重定向

2 个答案: