表单提交后如何隐藏按钮显示提示

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《表单提交后隐藏按钮显示成功提示》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

本文介绍如何通过前端 JavaScript 结合 PHP 后端逻辑，在联系表单成功提交后立即隐藏“Send”按钮，并显示自定义成功提示，避免页面跳转，提升用户体验。

要实现“提交后隐藏按钮 + 显示成功消息”，核心在于分离前端交互与后端处理：PHP 负责验证与发送邮件（或写入日志），而 JavaScript 负责响应提交结果、控制 DOM 显示状态。虽然原问题中提到当前表单会重定向（header('location: ...')），但为实现无刷新体验，我们推荐采用 AJAX 提交 + JSON 响应 方案——它更可控、更现代，也无需依赖 Cookie 或 Session 状态判断。

✅ 推荐方案：AJAX + PHP JSON 响应（无跳转）

1. 修改 HTML 表单（移除 action 和 onsubmit，添加 ID 便于操作）

<form id="contactForm">
  &lt;input type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;Name&quot; required&gt;
  &lt;input type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;E-mail&quot; required&gt;
  &lt;textarea name=&quot;message&quot; placeholder=&quot;Type Your Message&quot; required&gt;&lt;/textarea&gt;
  <button type="submit" id="submitBtn">Send</button>
</form>
<p id="thank-you-message" style="display: none; color: green; font-weight: bold;">
  Thank you for contacting us. We will be in touch with you soon.
</p>

✅ 注意：移除了 action 和内联 onsubmit，改用 JS 统一控制；同时为按钮和提示消息添加了明确 ID。

2. 添加轻量级 JavaScript（放在 前或使用 DOMContentLoaded）

<script>
document.getElementById('contactForm').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止默认提交（防止跳转）

  const submitBtn = document.getElementById('submitBtn');
  const messageEl = document.getElementById('thank-you-message');

  // 1. 提交前禁用按钮，防止重复点击
  submitBtn.disabled = true;
  submitBtn.textContent = 'Sending...';

  try {
    const formData = new FormData(this);
    const response = await fetch('/sendmail.php', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();

    if (result.success) {
      // 2. 成功：隐藏按钮，显示提示
      submitBtn.style.display = 'none';
      messageEl.style.display = 'block';
    } else {
      throw new Error(result.message || 'Submission failed.');
    }
  } catch (err) {
    alert('Error: ' + err.message);
    submitBtn.disabled = false;
    submitBtn.textContent = 'Send';
  }
});
</script>

3. 更新 PHP 后端（sendmail.php）返回 JSON 格式响应

将原 PHP 逻辑稍作封装，统一输出 JSON，不再执行重定向或直接输出 HTML：

<?php
header('Content-Type: application/json; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(['success' => false, 'message' => 'Invalid request method']);
  exit;
}

function test_input($data) {
  return htmlspecialchars(trim(stripslashes($data)), ENT_QUOTES, 'UTF-8');
}

$errors = [];
$data = [];

if (isset($_POST['name'], $_POST['email'], $_POST['message'])) {
  $data['name'] = test_input($_POST['name']);
  $data['email'] = test_input($_POST['email']);
  $data['message'] = test_input($_POST['message']);

  foreach ($data as $field => $value) {
    if (empty($value)) {
      $errors[] = "Please fill-in the form correctly";
      break;
    }
  }

  if (empty($errors) && !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
    $errors[] = "Invalid e-mail address";
  }
} else {
  $errors[] = "Missing required fields";
}

if (!empty($errors)) {
  echo json_encode(['success' => false, 'message' => $errors[0]]);
  exit;
}

// ✅ 执行邮件发送或日志写入（保持原有逻辑）
$to = 'example@example.com';
$subject = "example | You have a new message from " . $data['name'];
$body = "Name: {$data['name']}\nEmail: {$data['email']}\nMessage:\n{$data['message']}";

// 示例：写入日志（保留您原有的 file_put_contents）
$logEntry = "{$data['name']} == Email: {$data['email']} == Message: {$data['message']}\r\n";
file_put_contents('entries.log', $logEntry, FILE_APPEND | LOCK_EX);

// ✅ 返回成功响应（不重定向！）
echo json_encode(['success' => true]);
?>

⚠️ 注意事项与最佳实践

• 安全性：已保留 test_input() 的过滤逻辑，并显式设置 Content-Type: application/json，避免 XSS 和 MIME 类型混淆。
• 用户体验：按钮禁用 + 文字变化（如 “Sending…”）可显著降低用户误操作概率。
• 错误反馈：前端 catch 捕获网络异常或 PHP 报错，给予明确提示，避免“静默失败”。
• 兼容性：fetch() 在现代浏览器中广泛支持；若需兼容 IE，可用 XMLHttpRequest 或引入 whatwg-fetch polyfill。
• 非 AJAX 备选：若必须保留重定向，可在 redirect.html 中用 JS 隐藏按钮/显示消息，但体验割裂，不推荐。

✅ 总结

与其依赖 Cookie/Session 状态做服务端渲染判断，不如让前端主动感知提交结果——AJAX + JSON 是更简洁、可靠、可维护的解法。只需三步：① 表单去重定向化；② JS 拦截提交并操作 DOM；③ PHP 统一返回结构化响应。这样，按钮消失与成功消息出现瞬间完成，用户感知流畅，代码职责清晰，也便于后续扩展（如添加加载动画、字段高亮错误等）。

本篇关于《表单提交后如何隐藏按钮显示提示》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！