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

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函数以执行所需的操作。 您可以在这里看看如何从javascript禁用按钮。 还可以在这里查看如何使用javascript更改按钮文本的示例。

Answer 3

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

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属性来设置禁用的属性。 请注意，我不介绍表单提交完成后如何重新启用按钮。

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