2011-11-12 63 views
0

gustavotkg最近共享了以下關於防止訪問者向文件提交多個輸入的查詢的知識。他建議如下:提交按鈕的時間控制

「如果在onclick事件禁用提交按鈕,訪客
將刷新頁面重新提交表單」。

你可以這樣做:

var btn = document.getElementById("button-id"); 
btn.onclick = function() { 
    btn.disabled = 'disabled'; 
} 

禁用按鈕提供了一個臨時的解決方案,事實上它出現多個enteries難以避免。

可以通過gustavotkg建議這個臨時的解決方案 通過進一步使提交按鈕爲一個時間 期間被禁止說一個星期或168hrs來幫助?

+0

您*可以*通過設置Cookie禁用通過JavaScript提交按鈕,但它很容易被繞過。更好的解決方案是識別用戶(通過登錄,IP地址等)並記錄每個用戶提交條目的時間。 – nickb

+0

發送單個條目後,是否可以將提交按鈕編寫爲自毀或無法操作? – Webiter

+0

是的,當用戶發送單個條目時,您可以設置一個表示提交的cookie。當用戶點擊按鈕時,在按鈕的onclick屬性中,您將檢查cookie是否存在。如果確實如此,那意味着用戶已經提交了一個條目,並且您不應該讓他們再提交一個條目。 – nickb

回答

1

下面是一個演示所需功能的簡單示例。

cookie設置爲7天的到期日期。當按鈕被點擊時,onclick事件檢查cookie是否被設置,如果是,它會通過返回false來拒絕提交。否則,該函數設置cookie並允許提交通過。

請注意,這是要保證任何事情,任何(非新手),用戶可以刪除Cookie,然後重新提交一個條目。

<script type="text/javascript"> 
// Thanks to http://www.quirksmode.org/js/cookies.html 
function createCookie(name,value,days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime()+(days*24*60*60*1000)); 
     var expires = "; expires="+date.toGMTString(); 
    } 
    else var expires = ""; 
    document.cookie = name+"="+value+expires+"; path=/"; 
} 

function readCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1,c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
    return null; 
}  
</script> 

<form action="#" method="POST"> 
    <input id="button-id" type="submit" value="Submit" /> 
</form> 

<script type="text/javascript"> 
var btn = document.getElementById("button-id"); 
btn.onclick = function() { 
    var cookie_name = 'submitted_entry'; 
    btn.disabled = 'disabled'; 
    if(readCookie(cookie_name)) 
    { 
     alert('You can not submit an entry again!'); 
     return false; 
    } 
    else 
    { 
     createCookie(cookie_name, 1, 7); 
    } 
} 

</script> 
+0

這將有助於管理非新手輸入。我可以手動檢查多個輸入,但上述應該有助於減輕工作量。我們是否將日期改爲數字7,如下所示:date.setTime(date.getTime()+(7 * 24 * 60 * 60 * 1000)); – Webiter

+0

當你調用'createCookie()'時,它被接受爲天數,因此'createCookie(cookie_name,1,7)'行被接受爲參數。 1是cookie的值,與此應用程序無關,因爲您只需檢查它是否存在並且不關心實際值。 – nickb

+0

謝謝nickb,它一切正常。所以要改變那些天,我只需將第二個參數改變爲任何需要的天數! – Webiter