表单提交后的成功消息

Question

表单提交后的成功消息

3

我有一个表单来获取用户的详细信息。一旦表单提交，页面会加载。我想在页面加载后显示成功消息。

function Formvalidation(){
var validate = validateForm();
if( validate == true ){
    alert("success");
}
else{
    alert("not success");
}
return validate;
}

这是我现在正在使用的脚本。它会在页面重新加载之前发出警报。我想在那之后执行返回函数。

- Ajay Viknesh

嘿，你试过onClick方法了吗？ - Nitin Bisht

@NitinBisht 是的，我试过了。它没有起作用。我使用了cookies来在页面加载后显示成功消息。 - Ajay Viknesh

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabor · Answer 1

使用Bootstrap Notify：http://bootstrap-notify.remabledesigns.com/ 还有这个脚本：

    Alert = {
      show: function(type, title, message, url, delay) {
        $.notify({
            title: title,
            message: message,
            url: url,
            target: "_blank"
        },{
            type: type,
            showProgressbar: false,
            placement: {
                from: "bottom",
                align: "center"
            },
            delay: delay
        });
      },
    }

如果页面重新加载，您可以使用PHP调用消息：

echo '<script>Alert.show("success", "", "Form submit success!", "", 3000);</script>';

- hacikho · Answer 2

是否考虑将用户重定向到另一个页面以显示成功/失败，并在该页面上显示结果？

- Tidris · Answer 3

我注意到你在评论中提到你使用了cookies。你也可以使用localStorage，我认为这种方法对于静态网站来说更友好（而且更简单）。

在Formvalidation函数中，你可以将一个成功值设置到localStorage中，然后当新页面加载时，它会检查该成功值是否为true，显示成功消息，然后从localStorage中删除成功值。

以下是一个示例：

function Formvalidation(){
var validate = validateForm();
if( validate == true ){
    alert("success");
}
else{
    alert("not success");
}

// Add this, make sure all localStorage values are strings
localStorage.setItem("formSuccess", JSON.stringify(true));

return validate;
}

然后，在您的新页面/重新加载的页面上，使用窗口加载事件监听器来检查formSuccess是否为true：

window.addEventListener("load", (e) => {
  const isSuccessful = JSON.parse(localStorage.getItem("formSuccess"));
  
  if (isSuccessful) {
    console.log("submission successful!");
  }

});

- oldboy · Answer 4

如果你想在用户点击提交按钮时调用 Formvalidation()，那么 onsubmit="return Formvalidation()" 应该简单地改为 onsubmit="Formvalidation()"。