Question

什么是单击时禁用HTML表单提交按钮并更改其上的文本值的最佳方法？

Answer 1

有人推荐了一个Javascript onclick事件，但我建议使用onsubmit。这将在表单本身而不是按钮上，这包含您要禁用按钮的真实事件（提交），以及可能触发提交的其他事件。

document.getElementById('FormId').addEventListener('submit',function(){
    var button = document.getElementById('buttonId');
    button.innerText = 'Something new!';
    button.disabled = true;
});

编辑我的答案，包括您正在寻找的额外更改（按钮文本，也禁用）。

再次编辑：让我们超级浏览器！

var form = document.getElementById('FormId');

function submitForm(){
    var button = document.getElementById('ButtonId');
    button.innerText = 'Something new!';
    button.disabled = true;
}

if(form.addEventListener){
    form.addEventListener('submit',submitForm,false);
} else {
    form.attachEvent('onsubmit',submitForm);
}

这涵盖了IE9之前的IE版本。显然，如果你有多个表格，你会试着让它更加可重复使用，但这是一般的要点。

Answer 2

您可以添加onclick事件并实现javascript函数来执行您想要的操作。您可以查看here以查看如何从javascript禁用按钮。另请查看here以获取如何使用javascript更改按钮文本的示例。

Answer 3

您必须使用JavaScript并设置点击事件，例如它应该是：

HTML：

input type="button" value="value" id="1" onClick="OnClick(this.id)"/>

JavaScript的：

function OnClick(id)
{
    //some stuff...
}

此外，您可以使用jQuery并抓住提交，例如：

$("form").on('submit',function(event)
{
    event.preventDefault();
    //some stuff...
}

Answer 4

您可以使用onclick属性来设置disabled属性。请注意，我没有介绍在表单提交完成后如何重新启用按钮。

<button type="submit" onclick="this.setAttribute('disabled', 'disabled');">Submit</button>

请看这个小提琴的实例：

http://jsfiddle.net/yinkadet/DPJGw/

我希望这会有所帮助

Answer 5

实现这一目标的最佳方法是通过JQuery。

假设您的表单提交按钮有一个id =“submitButton”。因此，将此脚本添加到页面头部并引用放置下载的JQuery和JQuery-UI脚本的位置。

<script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>

<script>
    function submitButton_OnClick() {
        $("#submitButton").text("New Text");
        $("#submitButton").attr("disabled", "disabled");
     }

    $(document).ready(function() {
        $("#submitButton").click(submitButton_OnClick);
    });

</script>

这是你的HTML

<button id="submitButton">test</button>

检查它是否正常工作！

Answer 6

这是我使用Ruby on Rails和jQuery提供此功能的示例 - 它是我发现非常有用的jQuery答案的实现示例！（所以，仇恨）：

<div class="col s12">
    <div class="actions">
        <%= f.submit nil, class: "waves-effect waves-light btn green darken-3", id: "gsb" %>
        <script>
            function submitButton_OnClick() {
                $("#gsb").val("***CREATING***");
                $("#gsb").attr("disabled", "disabled");
                $("#new_group").submit();
             }

            $(document).ready(function() {
                $("#gsb").click(submitButton_OnClick);
            });
        </script>
    </div>
</div>

HTML表单提交禁用并在单击时更改文本

6 个答案: