javascript - 验证并提交表单后，重置表单+更改一些CSS样式

Question

我有一个简单的 html 联系表单，带有验证检查。

我希望在成功提交表单后执行一些命令。但我设置这整件事的方式......我无法让它发挥作用。

HTML 联系表单:

<form id="mycontact_form" name="form_name" method="post" onsubmit="return validateForm();" action="https://domain.tld/cgi-bin/sendformmail.pl">

validateForm.js:

function validateForm() {
  //validating input fields
  if (!valid){
    return false;
  } else {
    if(condition1 == true)
     {
        document.form_name.submit(); return;
     }
    else {
        // doing stuff to form content
        document.form_name.submit(); return;
    }
    }
}

当按下提交按钮时，表单将被验证并将被提交到 perl 脚本 sendformmail.pl，该脚本返回 HTML Status 204，以便用户保持在线状态这个页面并且没有重定向(这是我让这部分工作的唯一方法)。

成功提交后我希望得到的是:

• 清除/重置表单并
• 一些小的 UI 内容:更改 2 个元素的背景 + 2 个输入字段的占位符/内部文本以表示感谢消息。

但是，例如，如果我将 document.form_name.reset() 放在 document.form_name.submit() 之后，那就太快了。它会在提交之前重置表单。我还尝试在 onsubmit 中的 validateForm() 之后调用另一个(独立)函数，但这似乎是错误的(好吧，至少它不起作用)。

所以我想我需要将这两件事(重置+CSS更改)放在一个单独的函数中，并在成功提交表单后调用它。 但如何、何地、何时？

我非常有兴趣学习一个简单而有效的解决方案。 (但 jQuery 也可用)

感谢您的帮助。

Answer 1

如果您的电子邮件脚本与联系表单位于同一域中，请尝试通过 ajax 提交。这是一个简单的 jQuery 示例，它将位于您的 onsubmit 处理程序中:

if (valid) {
    $.ajax({
        url: "/cgi-bin/sendformmail.pl",
        method: "POST",
        data: $("#mycontact_form").serialize()
    })
    .done(function() { // this happens after the form submit
        $("#mycontact_form")[0].reset();
    });
}

return false; // don't submit the form again non-ajax!

否则，如果位于不同的域中，请尝试将表单的目标设置为页面上隐藏 iframe 的 ID。由于这是跨域的，因此您无法真正了解表单提交的结果，因为 same origin policy 。您可以抱最好的希望，并在 X 秒后重置表单:

if (valid) {
    $("#mycontact_form").submit();

    // clear form 3 seconds after submit
    window.setTimeout(function() {
        $("#mycontact_form")[0].reset();
    }, 3000);
}

这两种方法都可以让用户保持在同一页面上而无需刷新。