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

在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 2

修改您的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 3

首先，如果您正在进行传统的回发添加消息并没有多大用处 - 浏览器将会发布并重新加载页面。（当然，除非回传很长，浏览器才会永远旋转......）但无论如何...如果你不介意使用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 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>

禁用提交按钮并显示消息

4 个答案: