验证并提交表单后，重置表单+更改一些 css 样式答案

【问题标题】：After validating & submitting form, reset form + change some css styles验证并提交表单后，重置表单+更改一些 css 样式
【发布时间】：2015-08-25 22:59:30
【问题描述】：

我有一个简单的带有验证检查的 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() 之后调用另一个（独立）函数，但这似乎是错误的（好吧，至少它不起作用）。

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

我对学习一个简单而有效的解决方案非常感兴趣。（但也可以使用 jQuery）

感谢您的帮助。

【问题讨论】：

您的表单是 sendformmail.pl 文件的一部分吗？
表格在html网站上。 perl 脚本用于评估表单数据并将其作为电子邮件发送。我找到了脚本here。

标签： javascript jquery html forms onsubmit

【解决方案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);
}

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

【讨论】：

非常感谢您的帮助。我已经尝试了你的第一个想法。它发送电子邮件，然后清除表单。但是有一个问题会让人迷惑：表单有3个字段：name、email和message（textarea）。如果某个字段因为为空而无法验证，则占位符将更改为（“请输入您的 [字段名称]”，它会收到一个错误类（红色字体颜色等）。现在使用您的代码发送并清除表单后， name 和 email 字段显示失败的占位符 但没有错误类。可能是因为返回了 return false？知道如何解决这个问题吗？
如果 return 语句导致问题，请尝试从 onsubmit 处理程序中中断验证函数。

【解决方案2】：

我最终使用带有 ajax 的 beforeSend 而不是 done。而不是重置表单，我选择清除输入字段/文本区域的值（只有 3 个）。我还在beforeSend 中包含了输入字段/文本区域的首选“提交后”样式，以防万一。无论如何，感谢您帮助我并为我指明 ajax 方向。

$.ajax({
    url: "/cgi-bin/sendformmail.pl",
    method: "POST",
    data: $("#mycontact_form").serialize()
      beforeSend : function (){
                    // clear value of input fields/textarea & disable them
                    // use placeholders for "Thank you." etc.
                         }
    });

【讨论】：