禁用提交按钮并显示消息

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>