JS实现表单多按钮提交不同Action的方法
作者:代码拾荒时间:2026-10-29 16:03:04浏览:307
本文介绍如何利用JavaScript实现表单中多个按钮分别提交至不同Action的功能。通过为不同按钮绑定独立的onclick事件处理函数,在点击时动态修改form的action属性并调用submit方法,从而区分不同的服务器处理逻辑。
JS实现表单多按钮提交不同Action的方法
此前曾介绍过通过PHP实现表单多按钮提交不同Action的方法,本文继续探讨使用JavaScript实现相同功能的技术方案,旨在为开发者提供多样化的解决思路。
实现该功能的核心思路是:在表单中设置多个按钮,并为每个按钮绑定独立的onclick事件处理函数。当用户点击特定按钮时,JS代码会动态修改表单的action属性指向对应的处理程序,随后触发提交。具体实现代码如下:
<html>
<head>
<script>
function submitit1()
//交由程序1处理
{
document.myForm.action = "http://www.site.com/cgi1.php"
document.myForm.submit();
}
function submitit2()
//交由程序2处理
{
document.myForm.action = "http://www.site.com/cgi2.php"
document.myForm.submit();
}
</script>
</head>
<body>
<form name="myForm" METHOD=POST>
username:<input type=text name=text1>
password:<input type=password name=text2>
<input type=button value="Submit1" onClick=submitit1();>
<input type=button value="Submit2" onClick=submitit2();>
</form>
</body>
</html>
建议读者结合前文《php实现表单多按钮提交action的处理方法》对照学习,以便更全面地理解前后端在不同场景下的实现差异与适用场景。
作者最新文章
JS创建数组的两种方式:字面量[]与new Array()的区别
2026-11-05 18:02:28
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
