单击时更改“提交”按钮的文本

如果您正在编写AJAX应用程序,或者知道会有某种程度的延迟,则单击单击时更改提交按钮的文本可能会很有用。向用户提供某种形式的反馈是一种让他们知道自己已经做过的事情的有用方法。

首先,我们需要一种可以使用的表单,因此我在这里构建了一个快速表单。请注意,提交按钮具有与之关联的onclick动作,稍后将使用它来使我们能够更改按钮的文本。

<form action="" method="get">
<label for="textinput">Text:</label> <input id="textinput" name="textinput" type="text" value="" /> <input id="submitbutton" onclick="return changeText('submitbutton');" type="submit" value="Search" />&nbsp;
</form>

以下JavaScript块定义了用于更改提交按钮的文本的函数。该函数只是查找输入元素,并将其值更改为“ Loading ...”。此函数返回false,这将导致按钮不提交表单。如果您希望在按下按钮时提交表单,则可以将其更改为true。

<script type="text/javascript"> 
    function changeText(submitId){
        var submit = document.getElementById(submitId);
       submit.value= 'Loading...';
        return false;
    };
</script>