Javascript 禁用提交按钮并显示消息

我希望在提交表单时能够禁用submit按钮，也希望在提交表单时添加类似（“这可能需要一段时间”）的消息

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

选择信用卡：
美国运通
全权委托

输入号码：

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

这可能需要一段时间。。。
$（“#提交按钮”）。单击（函数（）{
$（this.next（）.show（）；
$（此）.attr（“已禁用”、“已禁用”）；
});

在HTML中添加一个简单的span或其他内容：

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

在jQuery中：

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

---

不建议在单击时禁用提交按钮，因为这可能会停止提交

我建议这样做

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>

函数验证（表单）{
如果（…）{
.
.
.
返回false；//停止提交
}
//在这里我们很快乐
document.getElementById（“submitbutton”）.style.display=“无”；
document.getElementById（“pleaseWait”）.style.display=“”；
返回true；
}
选择信用卡：
美国运通
全权委托

输入号码：
请稍候。。。

修改

验证（）

功能，包括禁用提交按钮并显示消息：

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

---

+1感谢您除了提供大家都喜欢的框架之外，还提供了香草JS。再次感谢您今天的帮助……我将在今晚晚些时候试一试。

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