禁用提交按鈕並顯示消息

Question

id希望能夠在提交表單時禁用提交按鈕，還可以在提交表單時添加類似於「（這可能需要一段時間」）的消息。

<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this);"> 

<p>Select credit card: 
    <select tabindex="11" id="CardType"> 
     <option value="AmEx">American Express</option> 
     <option value="CarteBlanche">Carte Blanche</option> 
    </select> 
</p> 

<p>Enter number: 
    <input type="text" id="CardNumber" maxlength="24" size="24" value="1234" /> 
    <input type="submit" id="submitbutton" /> 
</p> 

</form> 

Answer 1

修改您Validate()功能，包括禁用提交按鈕，顯示消息：

function Validate(f) { 
    var isValid = true; 
    // do validation stuff 
    if (isValid) { 
     f.submitbutton.disabled = true; 
     document.getElementById("submitMessage").style.display = "block"; 
    } 
    return isValid; 
} 

http://jsfiddle.net/gilly3/EjkSV/

Answer 2

首先，如果您正在做傳統的回發，添加消息並沒有多大用處 - 瀏覽器會發布並重新加載頁面。 （當然，除非回發這麼長的瀏覽器只是不斷旋轉...），但反正...如果你不介意使用jQuery，

<input type="submit" id="submitbutton"/> 
<span style="display:none">This may take a while...</span> 

$("#submitbutton").click(function() { 
    $(this).next().show(); 
$(this).attr("disabled","disabled"); 
}); 

Answer 3

添加一個簡單的跨度或東西到你的HTML：

<span id="waitMessage" style="display: none;">This may take a while....</span> 

然後在點擊事件，表明跨度和禁用按鈕：

在純javascript：

document.getElementById('submitbutton').addEventListener("click", function() 
{ 
    document.getElementById('submitbutton').disabled = true; 
    document.getElementById('waitMessage').style.display = 'visible'; 
}, false); 

在jQuery中：

$('#submitButton').click(function() 
{ 
    this.disabled = true; 
    $('#waitMessage').show(); 
}); 

Answer 4

不建議禁用onclick提交按鈕，因爲這可能會停止提交。

我建議，而不是像這樣

function Validate(theForm) { 
    if (.....) { 
. 
. 
. 
    return false; // stop submission 
    } 
    // here we are happy 
    document.getElementById("submitbutton").style.display="none"; 
    document.getElementById("pleaseWait").style.display=""; 
    return true; 
} 

<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this)"> 

<p>Select credit card: 
    <select tabindex="11" id="CardType"> 
     <option value="AmEx">American Express</option> 
     <option value="CarteBlanche">Carte Blanche</option> 
    </select> 
</p> 

<p>Enter number: 
    <input type="text" id="CardNumber" maxlength="24" size="24" value="1234" /> 
    <input type="submit" id="submitbutton" /> 
    <span id="pleaseWait" style="display:none">Please wait...</span> 
</p> 

</form>