本文介绍如何利用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的处理方法》对照学习,以便更全面地理解前后端在不同场景下的实现差异与适用场景。