提交后弹出窗口通知 [英] popup window notification after submit

问题描述

我有一个包含多个文件的表单，我希望在用户正确填写表单后打开一个弹出窗口

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

你能解释一下吗？

推荐答案

这回答了您问题的第一部分，关于在提交表单后如何与用户互动，您可能还想验证。它没有回答你更具体的问题：为什么 onsubmit 不起作用？对于这个答案，还有其他一些优秀的答案（特别是佳能引用了的不正确位置属性。

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 onsubmit not work?" For that answer, there are several other excellent answers (specifically Canon's citing the improper location of the onsubmit attribute.

这样就可以了...

取决于您想要的用户交互类型，在提交表单后，您可能有兴趣使用JavaScript查看XHR（XMLHttpRequest）。您可以在没有库的纯JavaScript中执行此操作，但如果您想要一个好的，经过验证的真实的，以异步方式处理请求和响应的方法我会查看jQuery库，特别是 .post（）方法。

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.

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

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.

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

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 action attribute 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.

$('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.

这篇关于提交后弹出窗口通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！