延迟表单提交后的preventDefault（）

-2

我试图连接每个表单元素上的事件侦听器，然后检查是否提交。我不希望表单提交，而是等待1秒钟后才能提交。虽然表单已经提交，但我希望它能从表单中得到结果console.log()。下面的代码应该工作，但它并不：延迟表单提交后的preventDefault（）

$("form").each(function() { 
    $(this).on("submit", function(e) { 
     e.preventDefault(); 
     var form = $(this); 
     setTimeout(function() { 
      form.submit(); 
     }, 1000); 
     var data = $(this).serialize(); 
     console.log(data); 
    }); 
});

我得到的问题是要么保持事件监听了，因此，它基本上运行到一个无限循环或不提交表单。我究竟做错了什么？

编辑：各位downvoting这样的：为什么呢？我知道我不应该为表单提交引入延迟，但是这是为我自己的项目而设计的，我等待一秒就完全可以。

来源

2017-09-05 MortenMoulder

我的意思是为什么？为什么你会让你的网站反应迟钝？这听起来像一个[XY问题（https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem） – Liam

尝试区分提交你从你不要一个需要。 – jidexl21

@ jidexl21我需要点击页面上的每个提交，所以这不是一个选项。 – MortenMoulder

var submitted = false; 
$("form").each(function() { 
    $(this).on("submit", function(e) { 
     if(!submitted) { 
      e.preventDefault(); 
      setTimeout(() => { 
       $(this).submit(); 
      }, 1000); 
      var data = $(this).serialize(); 
      console.log(data); 
      submitted = true; 
     } 
    }); 
});

这工作，因为它应该。我希望有更好的解决方案，但是如果它有效的话，它就可以工作。

来源

2017-09-05 13:04:34 MortenMoulder

你现在已经介绍了一个竞争条件。如果我双击提交按钮会发生什么？ – Liam

@Liam我很欣赏你对这个过程的想法，但不要担心我的问题。让我们假设页面在每次提交时重新加载。 – MortenMoulder

-1

$("form").each(function() { 
    $(this).on("submit", function(e) { 
     if(!$(this).hasClass("submitted")) { 
      e.preventDefault(); 
      var form = $(this); 
      setTimeout(function() { 
       form.submit(); 
      }, 1000); 
      var data = $(this).serialize(); 
      console.log(data); 
      $(this).addClass("submitted"); 
     } 
    }); 
});

如果你确实需要这样做，你可以尝试这样的事情。

来源

2017-09-05 12:50:30 Manav

不提交表格。 – MortenMoulder

是啊，有一个在语法错误，我固定的，现在 – Manav

解释什么是你变了，为什么，不只是倾倒一串代码。 – Barmar

-1

 bool someflag=true  
    $("form").each(function() { 
     $(this).on("submit", function(e) { 
     if (someflag){   
       e.preventDefault(); 
       someflag=false; 
     } 
       var form = $(this); 
       setTimeout(function() { 
        form.submit(); 
       }, 1000); 
       var data = $(this).serialize(); 
       console.log(data); 
      }); 
     });

来源

2017-09-05 12:51:04 N1gthm4r3

不提交表格。 – MortenMoulder

我相信这会起作用。表单提交延迟一秒钟。提交表单后，您将不得不删除超时。

$("form").each(function() { 

    $(this).on("submit", function(e) { 
     e.preventDefault(); 
     var form = $(this); 
     var data = $(this).serialize(); 
     setTimeout(function() { 
      console.log(data); 
      form.submit(); 
     }, 1000); 
    }); 

});

来源

2017-09-05 13:02:44

这是什么提交表格？ – Barmar

@Barmar呃。固定:) –

问题是form是jQuery对象，所以form.submit()运行jQuery提交处理程序，并导致无限循环。你想调用浏览器的原生提交代码。这样做有：

var form = $(this).get(0);

这台form DOM元素，而不是一个jQuery对象，form.submit()将提交表单，而无需通过jQuery的处理程序去。

来源

2017-09-05 13:06:39 Barmar

延迟表单提交后的preventDefault（）

回答

相关问题