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;
    }
    }
}

当按下提交按钮时，表单将被验证并将提交给返回HTML Status 204的 perl脚本sendformmail.pl ，以便用户停留在此页面上，而不是重定向（这是我让这部分工作的唯一方法）。

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

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

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

所以我想我需要将这两件事（重置+ 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。而不是重置表单我选择清除输入字段/ textarea的值（只有3）。我还在beforeSend中包含了输入字段/ textarea的首选“提交后”样式，以便不遗余力。无论如何，谢谢你帮助我和我指着我在阿贾克斯的方向。

$.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.
                         }
    });

验证后＆amp;提交表单，重置表单+更改一些CSS样式

2 个答案: