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

实现这一点的最佳方法是通过 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 3

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

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

在这个小提琴中查看现场示例：

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

我希望这有帮助

Answer 4

您可以添加一个onclick事件并实现一个 javascript 函数来执行您想要的操作。您可以在这里查看如何从 javascript 中禁用按钮。还可以在此处查看如何使用 javascript 更改按钮文本的示例。

Answer 5

您必须使用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 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>