HTML表单提交动作转移到php邮件处理程序process.php使用ajax没有收到邮件提交答案

【问题标题】：HTML form submit action transfer to php mail handler process.php using ajax not getting submissions on mailHTML表单提交动作转移到php邮件处理程序process.php使用ajax没有收到邮件提交
【发布时间】：2020-08-09 03:17:45
【问题描述】：

这里是html表单

      <!DOCTYPE html>
    <html lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        
    <form id="form" action=""  name="form" class=" f-color " >
        <div class="form-group ">
            <label for="contactusername">Name</label>
            <input type="text " name="name" class="form-control " placeholder="Enter Your Name" id="contactusername " required>
        </div>
        <div class="form-group ">
            <label for="contactemail ">Email</label>
            <input type="email " name="email" class="form-control " placeholder="Enter Your Email" id="contactemail " required>
        </div>
        <div class="form-group ">
            <label for="contactcomment ">Your Message</label>
            <textarea name="msg" class="form-control " placeholder="Enter Your Message Here" rows="5 " id="contactcomment " required></textarea>
        </div>
        <input type="submit" name="submit" value="Send" class="btn btn-block bg-light mt-4 py-3 text-uppercase font-weight-bold">
        
    </form>
</body>
</html>

使用的 Ajax 代码

<script>
    $(function () {
      $('form').bind('submit', function () {
        $.ajax({
          type: 'post',
          url: 'process.php',
          data: $('form').serialize(),
          success: function () {
            alert('form was submitted');
          }
        });
        return false;
      });
    });
  </script>

process.php在这里

<?php 
    if(isset($_POST['submit'])){
        $name=$_POST['name'];
        $email=$_POST['email'];
        $message=$_POST['msg'];
        
        $to='email@gmail.com';
        $subject='Form submission';
        $message="Name: ".$name."\n"."message:".$message;
        $headers="From: ".$email;
        if(mail($to, $subject, $message, $headers))
        {
            echo "<h1>Sent success! Thank you"." ".$name."</h1>";
        }
        else{
            echo "Something went wrong!";
        }
    }
?>

当我在表单上执行 process.php 时，我在我的电子邮件上收到表单提交，但页面更改为带有成功消息的空白页面。为避免这种情况，我尝试使用 ajax 但失败了。作为初学者，我卡在某个地方。帮我解决这个问题，如何在同一窗口上显示“提交成功”消息？。

【问题讨论】：

当您通过 AJAX 提交时，if(isset($_POST['submit'])) 不会为真 - 按下的提交按钮不会成为带有 .serialize 的表单提交数据集的一部分。跨度>

标签： php html ajax forms

【解决方案1】：

当您成功使用 ajax 时，您应该将数据放在某处，例如我放在最后的正文中。

<script>
$(function () {
  $('form').bind('submit', function () {
    $.ajax({
      type: 'post',
      url: 'process.php',
      data: {name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), msg: $('input[name="msg"]').val(), submit: true},
      success: function (result) {
        document.body.appendChild(result);
      }
    });
    return false;
  });
});
</script>

新添加：最有可能的是，问题也可能是您将提交事件绑定到按钮。试试这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    
<form id="form" action=""  name="form" class=" f-color " >
    <div class="form-group ">
        <label for="contactusername">Name</label>
        <input type="text " name="name" class="form-control " placeholder="Enter Your Name" id="contactusername " required>
    </div>
    <div class="form-group ">
        <label for="contactemail ">Email</label>
        <input type="email " name="email" class="form-control " placeholder="Enter Your Email" id="contactemail " required>
    </div>
    <div class="form-group ">
        <label for="contactcomment ">Your Message</label>
        <textarea name="msg" class="form-control " placeholder="Enter Your Message Here" rows="5 " id="contactcomment " required></textarea>
    </div>
     <div class="btn btn-block bg-light mt-4 py-3 text-uppercase font-weight-bold" onclick="sendLetter()" >Send</div>
    
</form>
</body>
</html>

<script>
 function sendLetter() {
    $.ajax({
      type: 'post',
      url: 'process.php',
      data: {name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), msg: $('input[name="msg"]').val(), submit: true},
      success: function (result) {
        document.body.appendChild(result);
      }
    });
  }
</script>

【讨论】：

我把body.appendChild(result);改成了document.body.appendChild(result);
我用您的更新替换了我的脚本，但提交后仍然没有收到邮件。谢谢您的关注。
看一看。我已经更改了数据属性，可能这种方式会起作用。
我认为$('form').serialize() 函数应该与type: 'GET'method 一起使用。但我不确定。
我尝试了新的脚本，但还是没有发送邮件。您辛苦了，谢谢您的回复。