Question

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

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

<form>

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

</form>

我已检查过用户是否已正确创建，这意味着提交正常，但我没有收到提醒窗口

你可以解释一下吗？

Answer 1

来自MDN的submit事件（强调我的）

的文档

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

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

因此，将submit处理程序从<input>移至<form>（sample）：

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

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

Answer 2

这回答了问题的第一部分，关于在提交表单后如何与用户进行交互，您可能还需要验证。它没有回答您更具体的问题：＆＃34;为什么onsubmit不起作用？＆＃34;对于该答案，还有其他一些优秀的答案（特别是Canon's引用了onsubmit属性的不正确位置。

有了这个......

根据您想要的用户交互类型，在提交表单后，您可能有兴趣使用JavaScript查看XHR（XMLHttpRequest）。您可以在没有库的纯JavaScript中执行此操作，但如果您想要以异步方式处理请求和响应的良好，可靠且真实的方式，我将查看jQuery库，特别是{{3}方法。

jQuery允许您在提交表单之前和之后执行操作。如果要在将表单内容发送到服务器之前验证表单的内容，可以执行此操作。 jQuery还将使您能够对成功，失败和＆＃34;始终＆＃34;作出反应。基于您从服务器返回的响应进行的交互，以便您可以更好地为用户定制所需的用户体验。

下面是一个非常简单的示例，其中显示了如何序列化表单并将其发布到URL（在下面的示例中，action上的form属性中定义的URL）并接收回复。然后，您可以处理该响应，如果它是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);
  });
});

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

Answer 3

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

Answer 4

将以下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>

Answer 5

警报会因为您提交表单而弹出窗口。所以它永远不会到达那里。

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

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

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

素不相识

提交后弹出窗口通知

5 个答案: