如何在表单提交成功后隐藏提交按钮并显示成功提示

发布时间 - 2026-01-24 00:00:00    点击率:

本文介绍如何通过前端 javascript 与后端 php 协同配合,在联系表单成功提交后立即隐藏“send”按钮、显示自定义成功消息,避免页面跳转,提升用户体验。

要实现“提交成功后隐藏按钮 + 显示感谢消息”,核心思路是:不依赖页面跳转(header() 重定向),而是通过 AJAX 异步提交表单,并在 JavaScript 中控制 UI 状态。你当前的代码仍采用传统表单提交(

),这会导致整页刷新,无法平滑切换按钮与提示——因此需重构为无刷新提交。

✅ 推荐方案:AJAX + JSON 响应(前后端分离更清晰)

1. 后端 PHP(sendmail.php)返回结构化响应

修改你的 sendmail.php,确保它不执行重定向,而是统一输出 JSON,并在成功/失败时设置对应 HTTP 状态码:

 false, 'message' => 'Method not allowed']);
    exit;
}

// 验证 & 过滤逻辑(保持你原有 test_input 和 $errors 处理)
function test_input($data) {
    return htmlspecialchars(trim(stripslashes($data)));
}

$errors = [];
if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
    $errors[] = "Please fill-in the form correctly";
} elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $errors[] = "Invalid e-mail address";
}

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

// 发送邮件 & 写日志(保留你原有逻辑)
$name = test_input($_POST['name']);
$email = test_input($_POST['email']);
$message = test_input($_POST['message']);

$to = "contact@example.com";
$subject = "example | You have a new message from " . $name;
$body = "Name: $name\nEmail: $email\nMessage:\n$message";

$headers = "From: $email\r\n" . "Reply-To: $email\r\n";

// 记录日志(建议用 file_put_contents,注意权限)
$logEntry = "$name == Email: $email == Message: $message" . PHP_EOL;
file_put_contents('entries.log', $logEntry, FILE_APPEND | LOCK_EX);

// 发送邮件(示例,实际请用 mail() 或 SMTP 库)
if (mail($to, $subject, $body, $headers)) {
    http_response_code(200);
    echo json_encode(['success' => true, 'message' => 'Thank you for contacting us. We will be in touch with you soon.']);
} else {
    http_response_code(500);
    echo json_encode(['success' => false, 'mess

age' => 'Failed to send email. Please try again.']); } ?>
⚠️ 注意:mail() 函数在本地开发环境(如 XAMPP/MAMP)可能不可用,请测试或改用 PHPMailer 等可靠库。

2. 前端 HTML + JavaScript(关键交互逻辑)

保持你的 HTML 结构,但移除 onsubmit 冗余属性,添加 ID 便于操作:


  
  
  
  

添加以下 JavaScript(放在


# php  # css  # javascript  # java  # html  # js  # 前端  # json  # ajax  # cookie  # app  # ssl 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何实现数据库事务?(DB Facade示例)  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  Laravel如何配置Horizon来管理队列?(安装和使用)  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  javascript如何操作浏览器历史记录_怎样实现无刷新导航  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  简单实现Android文件上传  在线制作视频网站免费,都有哪些好的动漫网站?  智能起名网站制作软件有哪些,制作logo的软件?  如何在 Pandas 中基于一列条件计算另一列的分组均值  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  如何快速搭建高效服务器建站系统?  Laravel中的Facade(门面)到底是什么原理  如何在阿里云ECS服务器部署织梦CMS网站?  Linux后台任务运行方法_nohup与&使用技巧【技巧】  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  使用豆包 AI 辅助进行简单网页 HTML 结构设计  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  如何用PHP快速搭建高效网站?分步指南  详解ASP.NET 生成二维码实例(采用ThoughtWorks.QRCode和QrCode.Net两种方式)  韩国代理服务器如何选?解析IP设置技巧与跨境访问优化指南  Laravel怎么在Controller之外的地方验证数据  魔方云NAT建站如何实现端口转发?  深圳网站制作培训,深圳哪些招聘网站比较好?  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  企业网站制作这些问题要关注  Android Socket接口实现即时通讯实例代码  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  如何在阿里云部署织梦网站?  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  🚀拖拽式CMS建站能否实现高效与个性化并存?  如何用VPS主机快速搭建个人网站?  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站?  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  浅谈javascript alert和confirm的美化  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Laravel如何发送系统通知?(Notification渠道示例)  奇安信“盘古石”团队突破 iOS 26.1 提权  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  nodejs redis 发布订阅机制封装实现方法及实例代码  如何在企业微信快速生成手机电脑官网?  电视网站制作tvbox接口,云海电视怎样自定义添加电视源?  EditPlus中的正则表达式实战(5)  微信小程序 闭包写法详细介绍  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  如何自己制作一个网站链接,如何制作一个企业网站,建设网站的基本步骤有哪些?