延遲表單提交後的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（）

回答

相關問題