截取表格onSubmit

有沒有什麼辦法可以攔截html表單的onsubmit事件？在我的Web應用程序中，有幾個屏幕包含表單等。我們面臨的問題是，當用戶多次按任意按鈕時，服務器會因相同的請求而超載。一些表單已經附加了事件處理程序（如onSubmit，button.onClick等）。一種方法是通過瀏覽所有屏幕來「注入」我的按鈕禁用代碼。截取表格onSubmit

但我在尋找的是一個通用的解決方案，它可以通過包含寫入函數的腳本應用於所有屏幕。

我知道我可以使用jQuery設置回調（捕獲onSubmit表單），但在這種情況下的問題是，如果任何屏幕已經註冊了onSubmit，它可能不會被調用。

在這方面的任何幫助表示讚賞！

來源

2012-01-19 user1068991

是否要防止多個表單提交從單個頁面，還是什麼？ – J0HN

是的 - 我需要防止多個表單提交。雖然，我想擴展解決方案，以防止多個超鏈接點擊（可能通過捕獲link.onClick事件） – user1068991

您是否執行異步請求（AJAX），或者只是表單提交？ – J0HN

如果你已經有jQuery，我建議你使用它...你需要做的就是確保你的表單的onsubmit沒有「返回false」，否則它可以在提交時阻止jQuery。

這裏就是你需要做的：

刪除任何回報虛假從形式的onsubmit（如果有的話）。別擔心，我們稍後會在jQuery中處理這個問題。

向窗體中添加一個類...像「disableOnSubmit」。例如：

<form action="something" onsubmit="yourExistingCode" class="disableOnClick"> 
</form>

<form action="something" onsubmit="yourExistingCode" class="someOtherClass disableOnClick"> 
</form>

實現類似代碼：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('form.disableOnClick').submit(function(e){ 
      // preventDefault() does the same as "return false;". It 
      // will not submit the form. If you're not using return false 
      // and want the form to be submitted remove the line below 
      e.preventDefault(); 

      // Now diable any submit button 
      $('input[type=submit], button[type=submit]').attr('disabled, 'disabled'); 
     }); 
    }); 
</script>

來源

2012-01-19 08:26:57 iDev247

我覺得這段代碼是一個良好的開端。它應放置在單獨的文件，其中包括要使用它（如果你似乎有腳本的全局列表 - 它爲它的好地方）

var suppressed_items = []; 

function allowOnlyOne(item,e){ 
    if (jQuery.inArray(item, suppressed_items)==-1){ 
     //hi little item, I haven't saw you before, please go on... but I remember you 
     suppressed_items.push(item); 
     return true; 
    } 
    else{ 
     //Hey, you have been submitted already, stay where you are! 
     return false; //or e.preventDefault(), it's a matter of faith :) 
    } 
} 

jQuery(document).ready(function(){ 
    //don't worry, it won't replace your `ready` handlers, but just append new handler 
    jQuery("from").submit(function(e){ 
     return allowOnlyOne(jQuery(this),e); 
    }); 
});

您可以使用allowOnlyOne功能與任何項目你希望。因此，例如，允許在所有超鏈接一次點擊，即ready處理器裏面添加：

jQuery("a").click(e){ 
    return allowOnlyOne(jQuery(this),e); 
}

我希望你得到的基本思路：捕捉事件，得到觸發它的元素的ID，它送入AllowOnlyOne以及事件。

當然你可以用它四周爲自動執行關閉以達到incapsulation等等...

來源

2012-01-19 08:44:40 J0HN

截取表格onSubmit

回答

相關問題