Bootstrap 3.3.7模态框表单提交异常：跳转空白页，无法在框内显提示

嘿，我来帮你搞定这个模态框表单的麻烦！问题的核心在于：你的表单用了默认的同步提交方式，点击发送后浏览器会直接跳转到contact-form.php，所以模态框关闭，你只能在新页面看到错误提示。要让提示留在模态框里，我们需要改用AJAX异步提交，这样页面不会刷新，响应内容可以直接插入到模态框内的指定区域。

下面是具体的解决方案，一步步来：

1. 调整模态框内的表单结构 #

先完善你的模态框代码，给表单加ID、阻止默认提交行为，同时指定专门的消息展示容器：

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">联系我们</h4>
      </div>
      <div class="modal-body">
        <!-- 表单 -->
        <form id="contactModalForm" method="POST">
          <!-- 示例表单字段，你可以替换成自己的 -->
          <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" class="form-control" id="email" name="email" required>
          </div>
          <div class="form-group">
            <label for="message">消息:</label>
            <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
          </div>
          <!-- 消息展示容器，默认隐藏 -->
          <div id="formMessages" class="alert" style="display:none;"></div>
          <button type="submit" class="btn btn-primary">发送</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

2. 用jQuery实现AJAX提交 #

在页面底部（或外部JS文件）添加这段代码，监听表单提交事件，异步发送数据并处理响应：

$(document).ready(function() {
  // 监听表单提交
  $('#contactModalForm').submit(function(e) {
    // 阻止默认的页面跳转行为
    e.preventDefault();
    
    // 收集表单数据
    var formData = $(this).serialize();
    // 获取消息展示容器
    var messageBox = $('#formMessages');
    
    // 发送AJAX请求到PHP处理文件
    $.ajax({
      type: 'POST',
      url: 'contact-form.php',
      data: formData,
      success: function(response) {
        // 根据返回内容切换提示样式
        messageBox.removeClass('alert-danger alert-success');
        if (response.includes('错误') || response.includes('必填')) {
          messageBox.addClass('alert-danger');
        } else {
          messageBox.addClass('alert-success');
          // 成功后清空表单
          $('#contactModalForm')[0].reset();
        }
        // 显示提示消息
        messageBox.text(response).show();
      },
      error: function() {
        // 请求失败时的提示
        messageBox.removeClass('alert-success').addClass('alert-danger');
        messageBox.text('发送失败，请稍后重试').show();
      }
    });
  });
});

3. 调整PHP处理逻辑（contact-form.php） #

确保你的PHP文件只返回纯文本提示，不要输出整页HTML。示例如下：

<?php
// 验证必填字段是否为空
if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
  echo '错误：请填写所有必填字段！';
  exit;
}

// 这里添加你的邮件发送逻辑（比如用mail()函数或第三方库）
// 假设发送成功
echo '消息已成功发送，我们会尽快回复你！';
?>

关键注意点 #

• 确保页面已经引入了jQuery（Bootstrap V3依赖jQuery，你应该已经引入了，但要确认顺序：先引入jQuery，再引入Bootstrap JS）
• 表单字段的name属性要和PHP里$_POST的键一一对应
• 如果需要更复杂的响应逻辑，可以让PHP返回JSON格式（比如echo json_encode(['status' => 'error', 'msg' => '字段为空']);），然后在JS里解析处理

这样调整后，点击发送按钮时模态框不会关闭，错误或成功提示会直接显示在表单下方的容器里，完美解决你的问题！

内容的提问来源于stack exchange，提问作者user1532468