JavaScript表单提交与Submit按钮提交的区别及解决方案

JavaScript表单提交与Submit按钮提交的区别分析

本文通过具体实例，详细解析了JavaScript代码触发表单提交与使用Submit按钮触发提交之间的核心区别。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script>
function test()
{
  document.getElementById("myform").submit();  
  alert(11);
}
</script>
<form name="myfrom" id="myform" method="get" action="b.php">
<input type="text" name="pwd" value="" />
<input type="submit" name="sub" value="111" />
<input type="button" name="btn" value="btn" onclick="test()" />
</form>
</body>
</html>

需要特别注意：在使用GET方式提交表单时，action属性中不应包含URL参数；而POST方式则允许这样做。

JavaScript提交与Submit按钮提交的主要区别之一在于Submit按钮值的传递：当通过JS代码提交表单时，由于Submit按钮未被用户点击，其值不会随表单数据一起发送，这一行为在所有主流浏览器中保持一致。

另一种情况是用户按下回车键提交表单：在符合W3C标准的浏览器中，Submit按钮的值会被正常携带；但在IE6等旧版浏览器中，该值不会被携带。

解决提交行为差异的两种方案

针对上述差异，可以采取以下解决方案：

在表单中增加一个隐藏域（hidden field），用于统一标识提交来源。无论采用JS提交还是Submit按钮提交，该隐藏域始终有值，从而方便后端或前端进行统一判断。

另一种方案是在Submit按钮上绑定提交前的处理事件：

具体实现如：<input type="submit" name="btn" value="btn" onclick="test()" />。这种方式下，无论是JS提交还是按钮点击，都会携带Submit按钮的值。然而，使用JS提交时无法直接检测onsubmit状态。在W3C标准浏览器中，表单仅提交一次；而在IE6中，会出现两次提交：先执行JS中的form.submit()，再执行表单默认提交。

不同按钮类型的处理策略与注意事项

针对上述复杂情况，建议采用以下处理逻辑：

如果按钮类型为submit，应在表单层面使用onsubmit事件进行检测和拦截。

如果按钮类型为button，则应在JS验证通过后，手动触发submit事件来完成表单提交。

务必避免一种错误做法：既使用JS代码提交表单，又同时依赖onsubmit事件进行检测。这会导致逻辑混乱和不可预期的行为。

单纯使用JS提交表单时，如果在提交过程中调用alert等阻塞函数，在Firefox等浏览器中会阻塞表单的后续提交流程，而其他浏览器的表现可能不同。

希望本文所述的JavaScript程序设计技巧能对读者有所帮助。