表单按钮提交无重定向[关闭]答案

【问题标题】：Form button submit no redirect [closed]表单按钮提交无重定向[关闭]
【发布时间】：2016-04-11 06:56:24
【问题描述】：

让我们从代码开始

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 页面，而只是验证并确认动画按钮发送。任何见解将不胜感激。

已编辑**

因此，我查看了许多建议的更改，但似乎仍然无法弄清楚这一点。这是客户想要在网站http://tympanus.net/Tutorials/CircularProgressButton/ 上使用的按钮。到目前为止，我已经按照每个人的建议进行了编辑，当我合并编辑时，我的按钮退出工作。我无法将它放在<form></form> 标签中，因为它不会调用脚本并运行。在我看来，这些更改会导致页面刷新。我已经修改了提供的 HTML 以包含整个页面 html。我知道它不干净；我还有一些事情要做。

回顾一下
客户希望动画按钮（svg 动画）确认（绿色复选标记）或拒绝（红色 X）表单提交。没有重定向到 send.php 文件（但仍然有 php 向他发送电子邮件）。

尼克

【问题讨论】：

你可以使用 Ajax 来做这个
我对 ajax 没有太多经验，没有任何示例或阅读您会推荐的内容
是否可以将html页面与表单和php文件结合起来？如果可能的话，您可以将表单 action 属性更改为页面本身，并将所有 php 放入 if 语句中：if(!empty($_POST)) { // make email }。然后根据 POST（或 GET）数据是否存在来更改按钮。

标签： php forms animation svg

【解决方案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();
});

其他一些注意事项和建议

正确清理用户输入
在客户端使用 JS/Jquery 和/或 PHP 验证表单输入

【讨论】：

感谢您的帮助，我已经调整了我的初始帖子以包含我的整个 HTML。我尝试进行更改，但它们似乎不起作用。页面刷新并且没有为按钮设置动画，也没有正确调用要发送的 php 文件。也许我想念我需要做什么。有什么想法吗？
您在上面编辑的 HTML 仍然存在问题。提交按钮需要在表单内或在您的 javascript 中引用才能提交。表单中的消息字段缺少名称属性。此外，我在您的 HTML 中没有看到 AJAX 调用，您是将其添加到同一个文件中还是添加到您的外部 JS 文件之一？
我最终将 HTML 恢复到我开始的位置，因为按钮动画不起作用。如果我将按钮放在
标签中，它无法动画，但在

标签之外它会动画。此外，如果我将脚本放置在适当的位置，因为它在标签之外，它不会动画只是刷新页面
我只是在开发人员工具下查看了 chrome 中的页面，似乎放置了脚本以允许按钮位于
标签之外，它实际上正在处理动画只是没有显示它。但是当我将它加载到服务器以测试 ajax/php 时，它看起来会运行动画大约 1 毫秒，然后刷新页面并且不会通过
要制作动画的 SVG 包含在“进度按钮”div 中，因此必须在按钮仍在这些标签内的情况下移动。如果您查看支持动画的 JS 和 CSS 文件，它们会查找具有“进度按钮”类的元素。如果您使用表单标签之间的按钮和 SVG 移动整个 div，它应该会动画。

【解决方案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.";
}
?>

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

【讨论】：