验证并提交表单后，重置表单 + 更改一些 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 which return a HTML Status 204 所以用户停留在这个页面上并且没有被重定向（这是我让这部分工作的唯一方法）。

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

clear/reset 表格和
一些小的 UI 内容：更改 2 个元素的背景 + placeholder/inner 2 个输入字段的文本以感谢您的消息。

但是例如，如果我在 document.form_name.submit() 之后放置 document.form_name.reset()，它就太快了。它在提交之前重置表单。我还尝试在 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);
}

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

Answer 2

我最终使用 beforeSend 和 ajax 而不是 done。我没有重置表单，而是选择清除输入 fields/textarea 的值（只有 3 个）。我还在 beforeSend 中包含了输入 fields/textarea 的首选 'post-submission' 样式，以防万一。无论如何，感谢您帮助我并为我指明 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.
                         }
    });

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

After validating & submitting form, reset form + change some css styles

html

javascript

forms

jquery

onsubmit