form中button按钮提交到不同的action

最新推荐文章于 2019-10-16 11:11:51 发布
原创 最新推荐文章于 2019-10-16 11:11:51 发布 · 376 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#form中button按钮提交到不同的action

本文介绍了一个网页上实现重新计算与保存记录的功能，包括JavaScript触发的按钮操作及相应的HTTP请求。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
 //重新计算按钮提交
   function accountMonth(){
     document.caozuo.action="wage.do?operate=accountMonth ";
  document.caozuo.submit();
  alert(document.caozuo.action);
   }
   //保存记录提交
      function saveWageTohistory(){
     document.caozuo.action="wage.do?operate=SaveWageTohistory";
  document.caozuo.submit();
  alert(document.caozuo.action);
   }
</script>
</head>

<body>
<form action="" method="post" name="caozuo">
<input type="button" value="重新计算" onclick="accountMonth()" class="botton"/>
<input type="button" value="保存记录" onclick="saveWageTohistory()" class="botton"/>
</form>
</body>
</html>

用image来提交form不想使用button提交form
12-13
通常，我们使用`<button>`或`<input type="submit">`标签来创建一个提交按钮，但有时为了美观，开发者可能会选择使用图像（image）作为提交按钮。本文将详细讲解如何使用图像提交表单，以及解决可能出现的重复提交...
在FORM的不同按钮实现不同的ACTION的方法
12-24 764
 form name="myForm" method="post" action="">input type="text">input type="button" name="b1" value="b1" onclick="submitform(b1)">input type="button" name="b2" value="b2" onclick="submitform(b2)">fo
当一个表单中有多个按钮时，可以通过onclick()事件触发不同的action请求
fighting_12的专栏
11-22 6800
当一个表单中有多个按钮时，可以通过onclick()事件触发不同的action请求 例如：         document.forms[0].action = "photoManage_update.action";(要跳转的action)        document.forms[0].submit();(提交)
多不同按钮提交一个表单，提交到不同的action中
xuehuagongzi000的博客
09-29 1944
1.html中的代码 form role="form" id="downloadDocId"> input type="button" id="txt" class="btn btn-primary btn-lg" th:onclick="'javascript:jsdownloadTxt()'" th:value="Download"/> 2.js中的代码
一个表单两个不同action的提交按钮
1002710030
10-16 317
<form name="form" method="post"> <input type="button" value="ok" onClick=ok()> <input type="button" value="no" onClick=no()> </form> <script language=javascript> funct...
一个表单,多个提交按钮,提交到不同的action
lionelf的专栏
01-13 228
&lt;input type= "button"  value= "提交"  onclick= "myForm.action='add.do';myForm.submit()" &gt;   &lt;input type="button"  value= "预览"  onclick= "myForm.action='view.do';myF
通过button将form表单的数据提交到action层的实例
08-29
在我们的实例中，我们使用 Button 元素来提交 Form 表单数据，我们将 onclick 属性设置为一个 JavaScript 函数，该函数将 Form 表单数据提交到 Action 层。 知识点 2: 使用 Ajax 提交 Form 表单数据 在现代 Web ...
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
10-31
在一个网页表单(form)中，通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而，在某些特定情况下，我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个...
from表单多个按钮提交用onclick跳转不同action
12-12
//下面input框提交的action不同，用onclick跳转，写一个js方法 <input type=”button” class=”mulButton” name=”Ids” id=”allcheck” onclick=”manySend(‘ad/BusinessAction!sendmany.action’)” value...
在同一个form表单里有2个按钮，如何各自提交到不同的action里面去。
sdewendong的专栏
06-03 7200
很常见的业务场景： 一个jsp页面里面有一个form表单，表单中有几个input参数，两个按钮。一个按钮是查询功能，另一个按钮是下载功能。 String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSer
通过button将form表单的数据提交到action层
weixin_34007020的博客
09-07 700
　 form表单中不需要写action的路径，需要给form表单一个唯一的id，将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性"。给button按钮添加一个onclick()点击事件，并实现该点击事件，在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码： 1 ...
带有两个提交按钮的表单（带有不同的 action）
大泽的博客
08-31 755
带有两个提交按钮的表单（带有不同的 action）
web项目中通过button按钮跳转到action中
热门推荐
得已
06-10 1万+
表单中有多个提交按钮，想实现点击不同的按钮，实现不同的操作
dtwangquan的专栏
01-24 5764
在开头定义javascript然后在正文中的按钮上用onClick="return calc_form()"来转向 function print_form()   {    document.form.action = "print_page.php?id=";    document.form.target="_blank";   } function sub_form()   {
在一个form表单中根据不同按钮实现多个action事件
weixin_33682790的博客
07-26 524
&lt;form id="writeForm" method="post"&gt; &lt;div class="write-btn-tj"&gt; &lt;input type="button" value="提交日志"&gt; &lt;/
原生js form表单 不同按钮提交参数不同
最新发布
08-16
在使用原生 JavaScript 处理表单时，根据点击的不同按钮提交不同的参数，可以通过监听按钮的 `click` 事件，并在事件处理函数中动态修改表单的 `action` 属性或添加隐藏字段来实现参数的差异化提交。 ### 通过按钮点击事件动态修改表单参数 1. **动态修改表单 `action` URL** 可以通过 JavaScript 在点击不同按钮时修改表单的 `action` 属性值，从而提交到不同的后端接口路径。例如： ```javascript document.getElementById('button1').addEventListener('click', function () { const form = document.getElementById('myForm'); form.action = '/submit-endpoint1'; form.submit(); }); document.getElementById('button2').addEventListener('click', function () { const form = document.getElementById('myForm'); form.action = '/submit-endpoint2'; form.submit(); }); ``` 上述代码中，点击不同按钮时，`form.action` 被设置为不同的提交路径，然后调用 `form.submit()` 提交表单[^1]。 2. **通过隐藏字段传递参数** 如果后端接口是相同的，但需要根据按钮点击传递不同的参数（例如 `type=1` 或 `type=2`），可以在表单中添加一个隐藏的 `<input>` 字段，并根据点击的按钮动态设置其值： ```html <form id="myForm" method="post"> <input type="hidden" id="submitType" name="submitType" value="" /> <!-- 其他输入字段 --> <input type="text" name="username" /> <button type="button" id="type1">提交类型1</button> <button type="button" id="type2">提交类型2</button> </form> ``` ```javascript document.getElementById('type1').addEventListener('click', function () { document.getElementById('submitType').value = '1'; document.getElementById('myForm').submit(); }); document.getElementById('type2').addEventListener('click', function () { document.getElementById('submitType').value = '2'; document.getElementById('myForm').submit(); }); ``` 此方式适用于需要在同一个后端接口中根据参数进行逻辑分支处理的场景[^2]。 3. **阻止默认提交行为并使用 `fetch` 提交** 如果希望完全控制表单提交流程，可以使用 `fetch` 或 `XMLHttpRequest` 手动发送请求，从而实现更灵活的数据处理。例如： ```javascript document.getElementById('type1').addEventListener('click', function () { const formData = new FormData(document.getElementById('myForm')); formData.append('type', '1'); fetch('/submit-endpoint', { method: 'POST', body: formData }); }); document.getElementById('type2').addEventListener('click', function () { const formData = new FormData(document.getElementById('myForm')); formData.append('type', '2'); fetch('/submit-endpoint', { method: 'POST', body: formData }); }); ``` 此方法适用于需要异步提交、不刷新页面的场景，同时能灵活控制请求参数和响应处理[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值