2014-01-12 13 views
1

我有一個大型表單,它使用jQuery表單和jQuery驗證器插件發佈。 表單非常大,當您按下提交按鈕時,發生任何事情都需要一段時間。 爲了防止有人點擊提交按鈕多次,我使用的document_ready功能如下:在點擊時禁用submitbutton太慢,延遲

$('#submitbutton').click(function(){ 
    $(this).attr("disabled", "disabled"); 
    $(this).parents('form').submit(); 
}); 

這是按鈕: <input id="submitbutton" type="button" value="Заказать!" />

這並禁用按鈕,而不是立即,但僅在提交發生之前,這不是我想要的。 什麼是最好的方法來立即禁用按鈕?

我讓某人按了5或6次按鈕,這使得一團糟(這是我爲內部使用而寫的簡單訂單)。有了這個延遲,很難採取任何其他措施來防止在客戶端反覆發佈完全相同的數據。

總之,應該有解決這個問題的客戶端太優雅的方式......

現在我只能解決它在服務器端。 (無論如何都應該這樣做)。

+0

該按鈕是一個提交按鈕,我只是將類型更改爲按鈕。我把它放在問題中。它沒有加速任何事情;( – Lexib0y

+0

我現在正在研究在驗證器運行之前禁用按鈕的最佳方式。到目前爲止我發現的最佳方式是向驗證器添加一個函數。但據我所知,這意味着它將被執行所有的數據字段。 (這不是我想要的,或者應該想:)) – Lexib0y

+0

最後,我通過給表單一個唯一的數字並檢查服務器端(php)的重新提交來解決它。一般來說這是一個很好的措施。迄今爲止所有其他方法似乎都不是很好的證明。 – Lexib0y

回答

2

您的表單或提交按鈕是否調用某種需要大量時間才能真正發佈數據的驗證?

如果是這樣,請在驗證javascript的頂部添加.hide()

+0

是的,正如我寫的,我使用jQuery驗證插件。它只需要檢查兩個必填字段,但我想它必須通過整個表單數據才能完成。 – Lexib0y

+0

是的,你有沒有在代碼中可以隱藏你的元素的地方,在驗證開始之前?如果是這樣可以解決你的問題嗎? – erikrunia

+0

我會盡力找到這個,我會發布我的發現。 – Lexib0y

2
$('#submitbutton').click(function(){ 
    $(this).hide().attr("disabled", "disabled"); 
    $(this).parents('form').submit(); 
}); 

我發現使用.hide()的作品很棒。

如果由於某種原因您希望按鈕再次出現。你做這樣的事情。

$('#submitbutton').click(function(){ 
    $(this).hide().attr("disabled", "disabled"); 
    $(this).parents('form').submit(); 
    $(this).delay(3000).fadeIn(); 
}); 

這將等待3秒,然後褪色。

+0

感謝hide()的建議,但它沒有加速任何不幸的事情。 – Lexib0y

+0

@ Lexib0y嗯..它對我很好,我一直都在使用它。你也可以嘗試.hide(0)看看是否有幫助。 – CRABOLO

+0

隱藏(0)沒有把戲 – Lexib0y

1

可能的原因,我能想到的是,當你點擊它得到提交的表單表單中的按鈕類型將被提交,因此。

嘗試更改按鈕類型或在click功能中添加preventDefault。

編輯: 試試這個方法。

<form id="target" action="/"> 
    <input type="text" value="Hola"> 
    <input type="submit" value="Submit"> 
</form> 

,然後綁定事件處理這樣

$("#target").submit(function(event) { 
    alert("Handler called."); 
    event.preventDefault(); 
}); 
+0

兩者都有意義嗎? – Lexib0y

+0

不是真的..你可以使用它們中的任何一個......這只是爲了確保表單在按下按鈕時不會被提交。你可以做一個小提琴和分享。 – tgpatel

+0

是的,我會嘗試一些變體並分享,當然。 – Lexib0y

2

如何保存,如果你已經有了一個進展中的點擊和檢查?例如

$('#submitbutton').click(function() 
{ 

    if ($(this).data('clicked') === undefined) 
    { 
     $(this).data('clicked') = 'clicked'; 
     $(this).parents('form').submit(); 
    } 
}); 

您仍然應該隱藏或禁用該按鈕,並放置一個沙漏或視覺指示器,表單已提交。