如何在成功提交后隐藏回调表单？

Question

我的回调表单运行良好，但当客户按下提交按钮时，一个名为您的请求已成功发送的通知将出现在按钮旁边，如果用户多次点击提交按钮，则会向服务器发送多个请求，但我需要的是当用户按下提交按钮时，回调表单将被隐藏，并显示一个新的带有您的请求已成功发送的表单。

 $json = [
            'status' => 1,
            'text' => _('Your request successfully sent')
        ];
        die(json_encode($json));

    } else {

        $error = [
            'status' => 0,
            'text' => _('Write Full name and phone number')
        ];
        die(json_encode($error));

    }

} 

ajax

$.ajax({
        url: "../../engine/ajax/eogpo.php",
        type: "POST",
        dataType: "JSON",
        data: {
            action: 'orderCallWidget',
            phone: $('#phoneWidget').val(),
            FIO: $('#FIOWidget').val(),
            data: $('input, select').serialize()
        },
        beforeSend: function() {
            $("#overLoader").show();
        },
        success: function(data) {
            if(data.status) {
                $('.product__form__error').html("");
                $("#successMessage").html(data.text);
            } else {
                $("#successMessage").html("");
                $('.product__form__error').html(data.text);
            }
            $("#overLoader").hide();
        },
        error: function() {
            $('.product__form__error').html('<?php echo _("Unknown error"); ?>');
            $("#overLoader").hide();
        }
    });
});

- Arsen Ospanov

---

在按钮上方添加一个加载器，或者切换变量以防止表单多次提交。 - Akhil Aravind

请展示您的前端Ajax调用。您可以在“success”回调函数中禁用按钮（例如，如果您使用JQuery）。 - Rob

@Robert 添加了Ajax代码。 - Arsen Ospanov

Answer 1

好的，假设你的按钮有id为myButton，只需在$("#overLoader").hide();之后添加以下内容：

$("#myButton).attr("disabled",true);

你可以轻松地将其调整为隐藏 div 或完全从 DOM 中删除元素。

- Rob

---

我按照你指示添加了，但是没有任何反应。 - Arsen Ospanov

你的成功回调函数是否被触发了？你检查过ID了吗？ - Rob

是的，回调表单正常工作，我更改了我的按钮id为#callme，但回调表单没有隐藏。 - Arsen Ospanov