JavaScript中submit与button的区别及表单提交处理

submit与button的基本区别

submit本质上是button的一种特殊形式，其内部已封装了自动提交表单的动作。

当点击按钮后需要通过JavaScript进行输入验证或其他处理再提交时，通常建议将submit改为button以取消自动提交行为。否则可能导致表单被提交两次，在动态网页中这相当于对数据库执行了两次操作。若坚持使用submit，则必须在验证逻辑中明确返回true或false来控制提交流程。

submit和button在界面上均表现为按钮，主要区别在于type属性及触发的事件响应机制。submit负责提交表单，而button默认不提交表单。两者的核心差异如下：

submit默认行为是提交所属的form表单。

button用于响应用户自定义的事件，若未指定如onclick等事件处理函数，则不会执行任何操作。尽管button本身不自动提交，但可以通过JavaScript代码实现表单提交功能。例如，<input type="submit">用于发送表单，且支持按回车键提交表单。

<input type="button">仅具备按钮的基本功能，其提交的内容为按钮内部的文本（innerText）。

submit和button的详细对比

以下是submit和button的详细对比分析。

submit属于特殊的button类型，会自动提交表单数据。若在onClick方法中未添加return语句，表单将自动提交，此时该方法无法起到约束作用。

因此，在使用submit进行表单验证时，务必在JS判断逻辑中返回true或false以控制提交结果。

示例代码：<input type="submit" name="Submit" value="注 册" onClick=" return check();">。在JS中判断时，需编写return true;或return false;语句。

button是普通按钮，不会自动提交表单数据。可以在JavaScript中显式调用提交方法，例如：document.form1.submit()。适用场景包括一个页面存在多个提交按钮，需根据用户操作确定提交目标控制器。此时需在JS中判断用户操作，动态设置document.form1.action的值，并调用document.form1.submit()完成提交。

多按钮统一处理的实现方案

如果希望所有提交操作都在同一个servlet中处理，该如何实现？

提交按钮作为HTML组件，可以通过getParameter()方法获取其值。因此，需要固定getParameter()的参数名称。

该参数即为所有表单提交按钮的name属性值。为了使多个提交按钮能在同一个servlet中根据按钮值区分操作，这些按钮的name必须保持一致。

附相关代码示例。

JavaScript文件部分。

使用submit时的JSP页面代码示例。

使用button时的JSP页面代码示例。