JS实现表单多按钮提交不同Action的方法

作者:代码拾荒

时间:2026-10-29

浏览:306

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章