Javascript 验证后&；提交表格，重置表格+；更改一些css样式

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

我希望在成功提交表单后执行一些命令。但我把这整件事都安排好了。。。我做不到

HTML联系方式：

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

当按下submit按钮时，表单将被验证并提交到perl脚本sendformmail.pl，该脚本返回

HTML状态204

，因此用户停留在该页面上，不会被重定向（这是我让该部分工作的唯一方法）

现在，在成功提交后，我想要的是：

• 清除/重置窗体和
• 一些次要的UI内容：为感谢消息更改2个元素的背景+占位符/2个输入字段的内部文本

但例如，如果我将

document.form\u name.reset（）

放在

document.form\u name.submit（）

之后，速度太快了。它会在提交之前重置表单。我还尝试在

onsubmit

中调用

validateForm（）

之后的另一个（独立）函数，但这似乎是错误的（至少它不起作用）

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

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

---

感谢您的帮助。

如果您的电子邮件脚本与您的联系人表单位于同一域，请尝试通过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。由于这是跨域的，您没有真正的方法知道表单提交的结果，因为。您只需期待最好的结果，并在X秒后重置表单：

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

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

---

这两种方法都可以让用户在不刷新的情况下保持在同一页面上。

我最终使用了带有ajax的

beforeSend

，而不是

done

。我没有重置表单，而是选择清除输入字段/文本区域的值（只有3个）。我还将输入字段/文本区域的首选“提交后”样式包含在发送前的

中，这样就不会有任何意外。
无论如何，谢谢你的帮助&为我指明了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.
                         }
    });

表单是sendformmail.pl文件的一部分吗？表单位于html网站上。perl脚本用于评估表单数据并将其作为电子邮件发送。我找到剧本了。非常感谢你的帮助。我试过你的第一个想法。它发送电子邮件，然后清除表单。但有一个问题会让人困惑：表单有3个字段：姓名、电子邮件和消息（textarea）。如果某个字段因为空而无法验证，则占位符将更改为（“请输入您的[field name]”，并将获得一个错误类别（红色字体等）。现在，在使用代码发送和清除表单后，字段名称和电子邮件显示失败的占位符，但没有错误类。可能是因为返回了
return false
。知道如何解决此问题吗？如果return语句导致问题，请尝试从onsubmit处理程序中断验证函数。
$.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.
                         }
    });