JavaScript 提交 Form 表单的两种实现方式与注意事项

本文通过具体实例，详细解析了如何使用 JavaScript 来提交 Form 表单，旨在为读者提供实用的参考方案。

页面加载时自动提交表单

第一种场景是：在网页加载完成后，自动执行表单提交操作。

对应的 HTML Form 表单结构如下：

<form method="post" id="myform" action="a.php">
<input type="submit" value="提交表单">
</form>

实现该功能的 JavaScript 代码如下：

<script type="text/javascript">
function validate(){
 document.getElementByIdx_x('myform').submit();
}
window.load=validate();
</script>

需要注意的是，在使用 JavaScript 提交表单时，应避免在 form 内部定义 id 或 name 属性值为 "submit" 的元素。例如：<input type="button" name="submit" /> 或 <input type="button" id="submit" />。这种命名方式可能导致不同浏览器之间的兼容性问题，进而引发 JavaScript 报错。

通过超链接触发表单提交

第二种场景是：通过超链接（Anchor Tag）来触发表单提交。

对应的 HTML Form 表单结构如下：

<form method="post" id="myform" action="a.php">
<input type="test" value="name"/>
</form>
<a href="javascript:validate()">提交</a>

实现该功能的 JavaScript 代码如下：

<script type="text/javascript">
function validate(){
 document.getElementByIdx_x('myform').submit();
}
</script>

可以看出，利用 JavaScript 可以非常便捷地实现特定的前端交互功能。

希望上述内容能对各位在 JavaScript 程序设计方面有所帮助。