javascript - 停止刷新表单

Question

我有一个表单，它接受来自用户的数据，并在通过调用java服务发送邮件后给出成功消息。发送成功后，用户应该收到一条成功消息。就我而言，该表格是一个弹出窗口。因此，在提交表单时，会发布数据，并且弹出窗口会刷新/提交，但不会出现成功的弹出窗口。我正在使用以下代码:

$( "#target" ).submit(function( event ) {
  alert( "Mail Sent successfully" );
  event.preventDefault();
});

但我不想要上面的警报。我想要自定义的成功消息弹出窗口，这不是警报。例如

$(document).ready(function(){
  $( "#target" ).submit(function( event ) {
   $( "#dialog" ).dialog();
  event.preventDefault();
});
});

<div id="dialog" title="Basic dialog">
  <p>Mail Sent successfully</p>
</div>

这不起作用。

我也尝试过，在脚本中返回 false 和

<form method= "post" onsubmit= "return false()">

感谢任何帮助

Answer 1

您在表单中缺少 id="target"

<form method= "post" id="target">
  <input type="submit"/>  
</form>

<script>
$( "#target" ).submit(function( event ) {
  $( "#dialog" ).dialog();
  event.preventDefault();
});
</script>

这里是演示 https://jsbin.com/duyevo/edit?html,js,output