提交表單並用進度指示器替換提交按鈕

所以我們有很多表單在我們的網站周圍，不幸需要一段時間才能提交。提交表單並用進度指示器替換提交按鈕

我想要做的是編寫一個通用腳本，在提交按鈕或onclick上提交按鈕將替換提交按鈕加載指示器，然後提交表單，遵循表單提交操作的任何重定向。

如果我使用jQuery替換表單提交上的按鈕，它不會替換提交按鈕，但仍提交表單。決定在.click（）上執行此操作，並導致加載指示符替換提交按鈕，但表單不提交。還試圖替換提交按鈕，然後把一個setTimeout並使提交按鈕的父提交與jQuery的submit（）函數，都沒有用。

我也走了AJAX提交的道路等等，但每個都表現出它自己的問題。

目前我的代碼是：

$("#content form :submit").click(function(data) { 
    $(this).replaceWith('<img src="loader.gif" alt="submitting form" style="display:block; margin:0 auto">'); 
    var form = $(this).parent("form"); 
    setTimeout(function() { 
     console.log(form); 
     form.submit(); 
    },1000);  
});

我知道這個當前的代碼是錯誤的，但我已經通過很多不同的解決方案，得到它的90％，我已經有點失去了它了。有關如何做到這一點的任何建議？

編輯：對不起，我不認爲這是明顯的，當我第一次提交。提交時，DOM不會再在Safari上更新至少。雖然動作發生，但DOM不會發生變化併發生提交。結果是表單像往常一樣提交，加載gif不會發生。我認爲延遲實際的表單提交，直到DOM已更新將修復它，但它似乎並沒有提交（1000長，但希望事情工作第一）。另外，如果我將偵聽器放在提交而不是點擊並嘗試調用submit（），它將導致無限循環。

來源

2012-11-14 Rudiger

您需要處理程序綁定到窗體的submit事件，而不是一個click事件提交按鈕：

$("#content form").submit(function(e) { 
    var $this = $(this); 
    $('<img />', { 
     'src': 'loader.gif', 
     'alt': 'submitting form', 
     'class': 'loading', 
     'style': 'display: block; margin: 0 auto;' // Use a class instead 
    }).appendTo(this); 

    $this.find(':submit').hide(); 

    e.preventDefault(); 

    $.ajax({ 
     type: $this.attr('method') || 'get', 
     url: $this.attr('action') || window.location, 
     data: $this.serialize(), 
     success: function(response) { 
      $(this).find('.loading').remove(); 
      $(this).find(':submit').show(); 
     } 
    }); 
});

來源

2012-11-14 01:25:20 Blender

似乎遞歸調用'submit'和'的preventDefault（）''相同處理submit'內 – charlietfl

爲什麼使用超時？另外，'event'應該是基於你的參數的'e'。 –

@charlietfl：固定。在jQuery對象上調用'submit（）'會觸發'submit'處理器，但是在DOM對象上調用'submit（）'不會：http://jsfiddle.net/kTt2T/1/ – Blender

你可以只隱藏提交的輸入，而不是刪除它。看起來比使用超時和類似的東西更清潔。

$('form').on('submit', function(e){ 
    var submitButton = $(this).find('input[type=submit]'); 
    $(this).append('<span>submitting...</span>');//Replace with whatever you want 
    submitButton.css('display', 'none'); 
});

http://jsfiddle.net/g7GgU/

來源

2012-11-14 01:36:10 Alex

這是我原來的，但提交導致DOM（至少在Safari）停止更新。如果我返回false，它會按預期工作，當然它不會提交。 – Rudiger

即使在Safari中，它也適用於我。問題究竟在哪裏？ – Alex

我再次測試過它，它不適合我。你用什麼Safari？ Firefox的作品，但我懷疑Chrome會是一樣的。 – Rudiger

提交表單並用進度指示器替換提交按鈕

回答

相關問題