Question

我已经阅读了很多关于阻止从表单提交页面重新加载的解决方案，其中大部分是使用“JQuery脚本”或preventDefault()返回false。

问题是，如果您使用Javascript或JQuery阻止页面重新加载，代码将不会执行，因此在我的情况下，将不会发送电子邮件。那么，我怎么能同时运行？

这是我的HTML表单。

 <form id="myform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <p><input class="w3-input w3-padding-16" type="text" placeholder="name" required name="name"></p>
  <p><input class="w3-input w3-padding-16" type="email" placeholder="email" required name="email"></p>
  <p><input class="w3-input w3-padding-16" type="text" placeholder="subject" required name="subject"></p>
  <p><input class="w3-input w3-padding-16" type="text" placeholder="comment" required name="comment"></p>
  <p>
    <button class="w3-button w3-light-grey w3-padding-large" type="submit">
      <i class="fa fa-paper-plane"></i> SEND MESSAGE
    </button>

我的PHP代码，用于收集数据和发送电子邮件：

<?php
$name = $email = $comment = $subject = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = form($_POST["name"]);
  $email = form($_POST["email"]);
  $subject = form($_POST["subject"]);
  $comment = form($_POST["comment"]);
  $to = "myemail@gmail.com";
  mail($to,$subject,$comment,$email);
}
function form($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

我的JQuery：

$(document).ready(function() {
    $(document).on('submit', '#myform', function() {
      return false;
     });
});

Answer 1

请在没有页面加载的情况下使用$ .ajax方法：

 $("#btn").click(function()
 {
 $.ajax({
type : 'POST',
url : 'url',
data : $('#form').serialize() 
 });

}）;

Answer 2

我从这里得到了这个 http://remotephpdevelopers.com/blog/prevent-form-submission/

似乎是您正在寻找的东西。你只需要通过事件。希望这有帮助

$(“#submitButton”).click(function(event){
event.preventDefault();
//do your thing
});

阻止表单提交上的页面刷新会阻止代码执行

2 个答案: