在网页开发中，防止用户重复提交表单是一个非常重要的功能。通过简单的代码实现，可以有效提升用户体验，并减少服务器负载。本文将详细介绍如何通过JavaScript实现点击提交按钮后，按钮变灰且不可用的功能。

当用户点击提交按钮时，我们希望按钮立即变为灰色并且不可再次点击，以避免重复提交的问题。这个功能可以通过以下代码轻松实现：

onclick="javascript:{this.disabled=true;document.form1.submit();}"
    

上述代码的作用是：当用户点击提交按钮时，首先将按钮的disabled属性设置为true，这会使按钮变灰并失去点击功能，然后通过document.form1.submit()触发表单提交操作。

接下来是一个完整的HTML示例：

<form name=form1 method="POST" action="/" target=_blank>
    <p>
        <input type="text" name="T1" size="20">
        <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.form1.submit();}">
        <input type="reset" value="重置" name="B2">
    </p>
</form>
    

在这个例子中，<form>标签定义了一个表单，其中包含一个文本输入框和两个按钮：一个是提交按钮，另一个是重置按钮。当用户点击提交按钮时，按钮会立即变灰并触发表单提交。

此外，还有一个更常用的简化版本：

<input name="Submit" type="submit" name="addnews" class="input_sub" value="提 交" onClick="this.disabled=true;document.add.Submit.value='提交中...';document.add.submit();">
    

这段代码同样实现了点击提交按钮后按钮变灰的功能，并且还更新了按钮的文字显示为“提交中...”，从而给用户更直观的反馈。这种方式不仅能够防止重复提交，还能提升用户的交互体验。

总结来说，通过简单的JavaScript代码，我们可以轻松实现防止重复提交的功能。无论是使用onclick事件直接禁用按钮，还是结合表单对象动态修改按钮状态，这些方法都可以有效地解决重复提交的问题。希望这篇文章能帮助您更好地优化网页表单设计！

注意：为了确保SEO效果，请在文章中合理分布关键词，例如“防止重复提交”、“JavaScript代码”等，同时保持内容的专业性和可读性。