javascript 提交后弹出窗口通知

popup window notification after submit

提问by Makoto

I have a form with several fileds to be filled and I would like to open a popup window after the user has correctly filled the form

我有一个需要填写多个文件的表格，我想在用户正确填写表格后打开一个弹出窗口

To start, I do not know why this simple line of code does not work

首先，我不知道为什么这行简单的代码不起作用

<form>

  <input type="submit" value="submit" onsubmit="javascript:alert('success');" />

</form>

I have checked that the user is correctly created so it means that the submit was OK but I did not get the alert window

我已经检查过用户是否正确创建，所以这意味着提交没问题，但我没有收到警报窗口

Could you explain ?

你能解释一下吗？

回答by canon

From MDN's documentation of the submitevent (emphasis mine)

来自 MDN 的submit事件文档（重点是我的）

The submitevent is fired when a form is submitted.

Note that submitis fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)

submit提交表单时会触发该事件。

请注意，submit仅在表单元素上触发，而不是在按钮或提交输入上触发。（提交的是表单，而不是按钮。）

So, move your submithandler from the <input>to the <form>(sample):

因此，将您的submit处理程序从( )<input>移至<form>( sample)：

<form onsubmit="alert('success');">
    <input type="submit" value="submit" />
</form>

_{Note: Keep in mind that this alert will appear before the form is actually submitted... thereby blocking submission (and everything else) until the alert is dismissed.}

_{注意：请记住，此警报将在实际提交表单之前出现......从而阻止提交（以及其他所有内容），直到警报被解除。}

回答by Sean Quinn

This answers more the first part of your question, pertaining to how you might interact with the user following the submission of a form, which you may also want to validate. It does not answer your more specific question as to: "why does the onsubmitnot work?" For that answer, there are several other excellent answers (specifically Canon'sciting the improper location of the onsubmitattribute.

这更多地回答了您问题的第一部分，涉及您在提交表单后如何与用户交互，您可能还想验证该表单。它没有回答您更具体的问题：“为什么不起作用onsubmit？” 对于那个答案，还有其他几个很好的答案（特别是佳能引用了onsubmit属性的不正确位置。

With that out of the way...

有了这个...

Depending on the type of user interaction you want, after submitting the form, you may be interested in looking into XHR (XMLHttpRequest) with JavaScript. You can do this in pure JavaScript without a library, but if you want a nice, tried-and-true, way of handling the request and responses in an asynchronous manner I would look into the jQuery library, specifically either the .post()method.

根据您想要的用户交互类型，提交表单后，您可能对使用 JavaScript 研究 XHR (XMLHttpRequest) 感兴趣。您可以在没有库的纯 JavaScript 中执行此操作，但是如果您想要一种不错的、经过验证的、以异步方式处理请求和响应的方式，我会查看 jQuery 库，特别是.post()方法。

jQuery will allow you to do things before and after you submit the form. If you want to validate the form's content before you send it to the server, you can do so. jQuery will also give you the ability to react to successful, failed, and "always" interactions based on the responses you get back from the server so you can better tailor the user experience you want for your users.

jQuery 将允许您在提交表单之前和之后做一些事情。如果您想在将表单内容发送到服务器之前对其进行验证，您可以这样做。jQuery 还使您能够根据从服务器返回的响应对成功、失败和“始终”交互做出反应，以便您可以更好地为用户定制所需的用户体验。

Below is a very simple example that shows how you could serialize the form and post it to the URL (in the example below the URL defined in the actionattribute on the form) and receive a response back. You can then handle that response, if it is JSON or XML/HTML, however you need to.

下面是一个非常简单的示例，展示了如何序列化表单并将其发布到 URL（在下面的示例中，在action属性中定义的 URL form）并接收响应。然后您可以处理该响应，如果它是 JSON 或 XML/HTML，但是您需要这样做。

$('form').submit(function(/*DOMEvent*/ e){
  e.preventDefault();

  var url = $(this).attr('action'),
      data = $(this).serialize();
  $.post(url, data, function(response){
    /* Do something with the response, here we'll just log it to the console */
    console.log(response);
  });
});

Again, this is only a simple example.

同样，这只是一个简单的例子。

回答by Dean Elbaz

onsubmitshould be on the form tag, not the input. If you really want to put something there, it's onclickyou need.

onsubmit应该在表单标签上，而不是输入。如果你真的想把东西放在那里，那就是onclick你需要的。

回答by Trevor

The following POSTSthe form data to a jsp page, and check's the returned response. If the jsp page returns the string successthe success message will be displayed.

下面POSTS的表单数据到一个jsp页面，并检查返回的响应。如果jsp 页面返回字符串success，则将显示成功消息。

<script>
    function checkit(){
        $.post( "ajax/test.jsp",
            $('#form').serialize(),
            function( data ) {
            if(data == "success"){
                alert("success");
            }
        });
    }
</script>
<form onsubmit='checkit()' id="form">
    <input type='text' id="txt" />
    <input type='submit' value='Submit' />
</form>

回答by DanielPanic

The alert doenst popup because you submit the form. So it never reach there.

由于您提交了表单，警报不会弹出。所以它永远不会到达那里。

Its good for you to add more code. So assuming you are doing this in PHP (The form processor), you should add that alert there. Like this:

添加更多代码对您有好处。因此，假设您在 PHP（表单处理器）中执行此操作，您应该在那里添加该警报。像这样：

<?php
If($queryThatStoreTheUser){
?>
<script>
alert('Success');
</script>
<?php
}
?>

Of course this is just assuming it. onsubmit will not work in that situation.

当然这只是假设。在这种情况下，onsubmit 将不起作用。

Grettings

格雷廷斯