Jquery 不拦截表单提交 - Asp.net Mvc & Fancybox

Question

我正在开发一个应用程序，该应用程序使用 Jquery 来拦截我的表单提交以代替 Ajax 提交。到目前为止，一切都很好！一切都很好.. 如果客户端没有启用 JS，应用程序将保持完美运行。

好吧，今天我创建了一个新表单，但 JQuery 不拦截提交。确实，我改变了一点，但仍然如此。它应该工作。

我有一个简单的 PartialView，其中包含表单、一个 span 和两个按钮（NO（按钮）和 YES（提交））。我使用 RenderPartial("MyPartial") 到 DIV 和插件 FancyBox 将其显示为模式。根据单击哪个链接以显示模式，我更改表单的操作（报告垃圾邮件或删除项目）和具有特定消息的跨度。就像一个“花哨”的确认信息！

再次，到目前为止一切顺利。我更改了表单操作并且它可以工作（使用警报（form.attr（action）），我使用正确的消息更改跨度并且它可以工作，但是当我单击按钮提交表单（是）时，它会直接进行我提出了一个正常的请求，而不是我想要的 Ajax 请求。

这是表格：

<form id="dialogForm" action="" method="post">
  <div class="form_item_button">
     <span id="dialogQuestion" style="color: Black;"></span>
     <button id="btDialogNo" type="button" value="button" class="btn">No</button>
     <button id="btDialogYes" type="submit" value="Submit" class="btn">Yes</button>
  </div>
</form>

这是拦截表单提交的脚本：

    $(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(alert(theForm).attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();

             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });

有什么想法吗？我花了整整一天的时间试图修复它！ :(

谢谢

Answer 1

preventDefault() 似乎是obsolete。我不确定文档是否已被删除，但这是使用submit() event handler 获得相同效果的新方法：

 theForm.submit(function(e) {
  blah blah blah
  .............
  return false;
  }

让我知道这是否有效。我肯定很好奇。

Answer 2

我注意到您的提交按钮使用的是<button> 而不是<input>。

据我所知，这应该没问题，但是在调用事件处理函数后立即创建警报，例如：

    alert(e.attr("id"));

如果它没有返回任何东西，那么问题是点击提交按钮触发了监听的事件，即正在提交表单。

但是，如果它返回按钮的 id，而不是表单，那么问题可能是您在按钮上使用了preventDefault，而不是在表单上（反之亦然）。这可以通过简单地使用return false 并完全摆脱e.preventDefault() 来解决。

但是，如果以上都不是真的，并且您在点击提交时收到警报，那么问题可能与脚本的时间有关（您正在执行 preventDefault）。

顺便说一句，ajax 是否发生了，但您也收到了表单提交，还是整个函数都被忽略了？

我有一个表单，它无论如何都会提交，除非我为验证函数添加了除验证之外的其他内容。最终它与触发了错误的事件有关。我添加的额外工作以某种方式使我正在监听的事件最终赶上了。

Answer 3

两个问题。

1. 您用来提醒的线路。
2. 您在 ajax 调用中缺少一些右括号。

这里是代码...

$(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(theForm.attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();
            alert('here');
             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });
});​​​​

享受吧。