jQuery表单提交问题：提交后表单未隐藏且页面刷新，求解决

你的代码存在几个关键问题导致需求无法实现，以下是针对性的修正方案：

核心问题分析与修复 #

1. 阻止表单默认刷新行为
   表单默认提交会触发页面刷新，所有DOM操作都会因为页面重载失效，必须在提交事件中阻止这个默认行为。

2. 修正选择器错误

• JS中$("#contact_form")匹配不到目标表单：Shopify的{% form 'contact' %}生成的表单默认ID是contact，不是contact_form，需改为$("#contact")。
• 成功提示的选择器$("successMessage")缺少类选择器前缀.，正确写法是$(".successMessage")（因为它是class属性）。

3. 默认隐藏成功提示
   需要给.successMessage添加CSS样式，确保初始状态隐藏，提交后显示才有效果。

修正后的完整代码 #

CSS（添加到项目样式表中）

.successMessage {
    display: none;
}

jQuery代码

$(document).ready(function() {
    $("#contact").submit(function(event) {
        // 阻止表单默认提交刷新
        event.preventDefault();
        
        // 隐藏表单所在容器
        $(".nps_feedback_form").hide();
        // 显示成功提示
        $(".successMessage").show();

        // 可选：异步提交表单数据到服务器（如需实际提交）
        $.ajax({
            url: $(this).attr("action"),
            method: $(this).attr("method"),
            data: $(this).serialize(),
            success: function() {
                console.log("表单提交成功");
            },
            error: function(xhr) {
                console.error("提交失败", xhr);
            }
        });
    });
});

补充说明 #

• 用$(".nps_feedback_form")隐藏表单容器比直接隐藏表单更合理，能完整隐藏整个表单区域。
• 如果不需要实际提交数据到服务器，可以去掉AJAX部分，只保留阻止默认行为和DOM显示/隐藏逻辑。

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