提交后更改提交按钮上的文本

Posted 2023-05-08

【中文标题】提交后更改提交按钮上的文本

【英文标题】：Change text on submit button after submission

【发布时间】：2014-05-03 16:11:27

【问题描述】：

提交后是否可以更改提交按钮上的文字？示例按钮包含单词提交，并且在用户提交表单后，按钮现在将显示完成。如果是这样，它是如何完成的？

谢谢！

【问题讨论】：

用户提交表单时会发生什么？是用 AJAX 处理，还是重新加载整个页面？

哦，是用AJAX处理的。

然后在$.ajax成功函数中修改（因为技术上只有在服务器报告之后才可以考虑处理）。

【参考方案1】：

如果您使用 AJAX 处理表单，您可以简单地在 $.ajax jQuery 方法的成功回调中更改按钮文本，如下所示：

$.ajax(
    ...
    success: function(data)
        ...
        // If using an <input/> as the submit button
        $('BUTTON_SELECTOR').prop('value', 'Done');

        // If using a <button/> as the submit button
        $('BUTTON_SELECTOR').text('Done');
        ...
    
    ...
);

我希望这会有所帮助！

【参考方案2】：

是的，这是可能的，您可以这样做：

<form name="MyForm">
<input type=button name="b1" value="Submit" onclick="javascript:document.MyForm.b1.value='Done'">
</form>

FIDDLE EXAMPLE HERE

【参考方案3】：

$('#id_of_button').click(function( event ) 
    $('#id_of_button').prop('value', 'Text you want to change to');
);

编辑：实际上，更好的解决方案可能是将其绑定到表单的提交处理程序。

【参考方案4】：

我们可以使用下面的代码。它会将提交按钮设置为“正在上传，请稍候...”，并带有微调器图标。

<button name='button' type='submit' class='btn btn-primary right' data-disable-with="<i class='fa fa-spinner fa-spin'></i>Uploading please wait...">Save</button>