PHP表单提交跳转sendmail.php无样式、不触发原位提示问题求助

问题根本原因 #

• 你的表单当前是默认同步提交模式，浏览器提交后会直接跳转至action属性指定的sendmail.php页面，渲染返回的所有内容，自然不会停留在首页展示提示。
• sendmail.php里写的所有操作DOM的jQuery代码，在跳转后的独立sendmail.php页面中完全不生效：该页面既没有加载jQuery，也没有首页里的.result、.alert对应元素，也没有你站点的CSS样式。

修复步骤 #

1. 首页添加AJAX异步提交逻辑 #

首先确认首页已经引入jQuery库，之后在首页</body>标签前添加以下代码：

$(function() {
  // 监听表单提交事件
  $('#contactForm').submit(function(e) {
    // 阻止默认的同步跳转行为
    e.preventDefault();
    // 序列化所有表单数据
    let postData = $(this).serialize();
    // 异步提交数据到sendmail.php
    $.post($(this).attr('action'), postData, function(response) {
      // 将接口返回的内容插入到提示容器，自动执行返回的脚本
      $('.result .alert').html(response);
    });
  });
});

2. 微调sendmail.php输出逻辑（可选，优化体验） #

你现有代码直接输出的提示文字没有包裹在对应结构里，可以调整错误、成功提示的输出，把文字也包裹到列表结构中，匹配Bootstrap alert样式：
比如错误提示部分修改为：

if ( $pass==1 ) {
  echo "<ul>" . $errormessage . $alert . "</ul>";
  echo "<script>$(\".result\").show(\"fast\");$(\".result .alert\").addClass('alert-danger').removeClass('alert-success');</script>";
}

成功提示部分可以把感谢语也放到合适的容器里，避免样式错乱。

完成以上修改后，提交表单就不会跳转页面，提示会直接展示在表单下方的指定区域。

内容的提问来源于stack exchange，提问作者DEL-ightful