如何在點擊後禁用表單提交圖片？

Question

我試圖禁用表單提交按鈕，它是一個圖像後，單擊以防止重複條目。表單會傳給ERP/CRM的Netsuite，而且速度通常很慢，所以我們一直讓用戶多次點擊它，導致多個條目，這就是爲什麼我們希望在用戶點擊它後禁用它。

這是我們目前正在使用的代碼：

<INPUT TYPE="hidden" NAME="payment" VALUE="check" ##check## checked> 
<br> 
<INPUT type="image" onMouseOver="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" 
onMouseOut="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" 
src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" VALUE="order" 
NAME="order" id="order" class="button" onclick="this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';return true;"> 

找遍四周，多數說給它添加到的onclick區看了幾個建議：

this.disabled=true 

但是添加的代碼到onclick似乎沒有工作。我曾嘗試在netsuite提交部分之前和之後添加它，但似乎沒有區別。

有誰知道我該如何獲得這個工作？

Answer 1

this.disabled = true不適用於輸入[type = image]。 這必須在JavaScript中處理。

<input type="image" onclick="return submitForm(this)"/> 
<scritp> 
var submitted = 0; 
function submitForm(input){ 
    input.src = "new image path"; 
    if (submitted == 0) { 
     submitted = 1; 
     return true; 
    } 
    return false 
} 
</script> 

Answer 2

其實disabled=true並不妨礙燒製onclick事件的元素。相反，您可以使用JavaScript函數來執行您的提交說明，並在第一次執行後用變量鎖定它。

事情是這樣的：

var submitEnabled = true; 

function Submit() { 
    if(submitEnabled) { 
     submitEnabled = false; 

     this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx'; 
     //Or any submitting code you have 
    } 
} 

然後，你的圖像元素：

<INPUT type="image" onclick="Submit()" ... 

Answer 3

我做了一個快速測試，它看起來就像如果你禁用按鈕onclick形式永遠不會提交。我不知道，如果你有需要更改<form>標籤的能力，但如果這樣做，你可以添加一個onsubmit事件禁用提交按鈕的形式提交後：如果有

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="document.getElementById('order').disabled=true;"> 
    <input type="hidden" name="payment" value="check" checked> 
    <br> 
    <input type="image" onmouseover="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" onmouseout="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" value="order"name="order" id="order" class="button"> 
</form> 

添加你自己的CSS和JavaScript的能力，你可以更清理這些。

1. 鼠標經過圖像將通過CSS
2. ，簡單地禁用提交按鈕並不一定意味着表單無法提交能夠更好地處理。例如，您可以通過點擊鍵盤上的回車鍵來提交表單。最好防止提交事件本身，而不是禁用可能使用或不可使用的按鈕。

例子：

<style> 
    #order { 
     background: url('http://www.domain.com/pb/tpl/img/emailquote2.jpg') no-repeat; 
     width: 300px; /* sizing for example only */ 
     height: 100px; 
     border: none; 
    } 
    #order:hover { 
     background: url('http://www.domain.com/pb/tpl/img/emailquote3.jpg') no-repeat; 
    } 
</style> 

<script> 
    var formSubmitted = false; 

    function handleSubmit() { 
     if (!formSubmitted) { 
      formSubmitted = true; 
      return false; 
     } 
     return false; 
    } 
</script> 

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="return handleSubmit();"> 
    <input type="hidden" name="payment" value="check" checked> 
    <br> 
    <input type="submit" name="order" id="order" class="button"> 
</form>