在回发之前禁用提交按钮

时间:2013-07-29 09:37:26

标签: jquery asp.net submit postback

我想在回发之前禁用页面上的所有提交按钮。找到了3个(稍微)不同的代码示例,但没有一个在我的场景中工作。

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(new function () {
        //debugger;

        // 1
        $('#form1').one('submit', function () {
            alert('.one');
            $(this).find('input[type="submit"]').attr('disabled', 'disabled');
        });

        // 2
        $("#form1").submit(function () {
            alert('.submit1');
            $('input[type=submit]').click(function () { return false; });
        });

        // 3
        $("#form1").submit(function () {
            alert('.submit2');
            $('input[type=submit]').click(false);
        });
    });
</script>

HTML(来自View Source):

<body>
    <form method="post" action="WebForm12.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRk6dbofDK5YUWMwPmdBDnRWPCTyBN22BpAo7Y3C+2Gycs=" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKC36LkAgKr4aeRA6gaPoGNYlZvnjW07iB+LnlhIUr0qrTFHOADKmQQuhv0" />
</div>
    <div>
        <input type="submit" name="btnPost" value="Post" id="btnPost" />
    </div>
    </form>
</body>

更新

好吧,正如 putvande 所示,实际问题是定义ready事件函数时的 new 关键字。但是,代码示例仍未达到目标。

示例1 实际上没有运行相关的OnClick处理程序,因为由于被禁用而没有将按钮的值回发到服务器。

示例2/3 一次阻止了后续回发,但是在UI上启用了按钮。

进一步搜索最终采用更合适的技术来解决问题。下面的代码使用onbeforeunload事件来完美地禁用提交按钮。

window.onbeforeunload = DisableButtons;

function DisableButtons() {
    $("input[type=submit]").attr('disabled', 'disabled');
}

3 个答案:

答案 0 :(得分:0)

$('input[type="submit"]').attr('disabled', 'disabled');
return false;

答案 1 :(得分:0)

在某种程度上,您可以按照以下说明执行此操作。

您可以使用display:none添加一个按钮。在可见按钮javascript单击事件中,您可以禁用此按钮并调用隐藏按钮的单击(document.getElementById(&#39; btnHidden&#39;)。click())。

需要在可见按钮单击上执行的实际代码进入隐藏按钮的事件处理程序。

<强>更新

我没有假设更大的图片..如果应用程序范围广泛,您可能需要考虑这个..

对于OnClientClick按钮,您可以指定此功能...

function disableButton(btnID)
{
     setTimeout(function(){document.getElementById(btnID).style.background = "disabled.jpg";}, 10);
     document.getElementById(btnID).disabled = true;
     return true;
}

&#34; disabled.jpg&#34;是一个可以分配给背景的背景,它为按钮提供了禁用的外观。

这样,您可以暂时为用户提供禁用查找;但这是非常短的时间,因此表格已经发布到服务器。

答案 2 :(得分:0)

您的活动永远不会分配到您的form。 你需要改变:

$(document).ready(new function () {
                  ^^^

要:

$(document).ready(function () {

如果您更改了提交功能将正常工作。