这是我很久以前看到的一个技巧,但我忘记在哪里了,当时遇到这样的需求,做了笔记,现在整理成文章分享出来,因为我感觉这个小技巧还是挺有用的,这种应用场景也算比较常见,比如一个表单有“保存”、“保存草稿”、“预览”多个Submit按钮,就可以用到这个技巧。

假如我们有这样一个表单:

<form action="/submit">

  <!-- 其它 input 等标签 -->

  <input type="submit" value="Submit">

</form>

这里提交表单时,它会转到URL:/submit,假设您需要另一个提交按钮,该按钮提交到一个不同的URL。

当时我在网上搜索了一些方法,一种方法是放弃提交不同的URL,但给每个提交按钮一个共享的名称,但值不同,然后在处理时检查该值,以执行不同的操作。具体如下:

<input type="submit" name="action" value="Value-1">
<input type="submit" name="action" value="Value-2">

如果需要,可以在处理和重定向期间读取该值,这确实是解决问题的一种方法。

另一种方法是使用JavaScript在单击按钮时更改form标签的acton属性,写法有很多种,但归结起来就是:

<form name="form">

  <!-- 其它 input 等标签 -->

  <input type="submit" onclick="javascript: form.action='/submit';">
<input type="submit" onclick="javascript: form.action='/submit-2';"> </form>

这依赖于JavaScript来工作,这并没有什么大问题,毕竟现在有谁浏览网页会把JavaScript关掉呢。

最好的方法,其实是用HTML已经有的一个属性:formaction,应该很少人知道这个属性,至少当时我是不知道的。

你可以把formaction属性直接将用在submit按钮上,它将覆盖表单本身上的action操作。例如:

<form action="/submit">

  <input type="submit" value="Submit">

  <input type="submit" value="Go Elsewhere" formaction="/elsewhere">

</form>

是不是很简单,希望对你有所帮助。

如何为Form表单的多个提交按钮指定不同的Action地址?的更多相关文章

  1. 一个form表单,多个提交按钮

    技巧就是把提交的input的类型改成button!这样就可以实现多个按钮提交! 以下是案例: <form action="" id="tijiao"> ...

  2. 一个Form表单多个Submit提交按钮!实现提交不同的参数!

    给 submit 的按钮加onclick 方法来自定义预处理参数,比如<script type="text/javascript">function submitFun ...

  3. 如何为form表单的button设置submit事件

    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交

  4. form表单用ge方式提交时ie显示中文参数乱码

    有网友说 通过给form表单添加accept-charset="gb2312"和 onsubmit="document.charset='gb2312'" 但这 ...

  5. form表单的两种提交方式,submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  6. 触发form表单的两种提交方式,submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面 ...

  7. form表单有条件的提交

    form表单提交数据,比如,积分,score,在0--100之间 var score = $('#score').val(); if(score !=''){ if(isNaN(score)){ la ...

  8. form表单以get方式提交时action中?后面的参数部分不生效

    form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!

  9. 【转载】form表单的两种提交方式,submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

随机推荐

  1. Redis服务器和客户端的通信

    Redis客户端使用RESP(Redis序列化协议)与Redis服务器进行通信,RESP在位于TCP之上,而网络模型上客户端和服务器是保持的双工的连接.如图1 而一个简单的请求/响应的串行通信模型如下 ...

  2. D. Distance in Tree(树型Dp计数)

    \(其实思路都能想到一点,就是去重这里特别麻烦,没有好的思路.\) \(设dp[i][j]为以i为根深度为j的节点数量\) \(dp[parent][j]=\sum{dp[son][j-1]}\) \ ...

  3. Q - Play With Sequence HDU - 3971 线段树 重新排序建树

    Q - Play With Sequence HDU - 3971 这个题目是一个线段树,比较特别的线段树,就是c询问一定次数之后重新排序建树来优化减低复杂度. 第一次碰到这种题目有点迷. 这个题目写 ...

  4. spring boot的核心注解

    1.@SpringBootApplication 是SpingBoot的启动类 此注解等同于@Configuration+@EnableAutoConfiguration+@ComponentScan ...

  5. SAP HTTP调用其他系统接口

    1业务说明 ABAP系统通过HTTP方式调用其他系统发布的接口 2代码实现 2.1认证接口 根据访问的URL创建HTTP客户端 设置访问方式,并调用SEND和接收函数 有时需要专门验证用户名密码 获取 ...

  6. 【华为云技术分享】智能诊断和优化,华为云DAS服务云DBA平台让您无忧运维

    摘要:随着时代的发展,传统的“人工”运维方式,已经逐渐跟不上企业业务发展的需要.如何更好的保证数据库系统的稳定性.安全性.完整性和高性能,实现运维工具化.产品化.自助化.自动化,是当前数据管理和运维面 ...

  7. spring-boot如何去获取前端传递的参数

    本文主要讨论spring-boot如何获取前端传过来的参数,这些参数主要有两大类,一类是URL里的参数,一个是请求body里的参数 url里的参数 通过url里传过来的参数一般有三种方式,下面我们来看 ...

  8. .netcore 部署时遇到413 Request Entity Too Large 和 413Payload Too Large 的问题

    .netcore3.1 遇到一个webapi 上传大文件问题 首先,在kestrel模式调试模式下上传 会报错413, 需要在三个地方添加 1.startup中 这里设置的2g最大值 2.在progr ...

  9. DP动态规划之01背包问题

    目录 问题描述 问题分析 问题求解 Java代码实现 优化方向一:时间方面:因为是j是整数是跳跃式的,可以选择性的填表. 思考二:处理j(背包容量),w(重量)不为整数的时候,因为j不为整数了,它就没 ...

  10. 设计模式之GOF23外观模式

    外观模式 迪米特原则:一个软件实体应当尽可能少的与其他实体发生相互作用 外观模式核心:为子系统提供统一的入口,封装子系统的复杂性,便于客户端调用 相当于找了个代理帮你做了所有事而你只需要和代理打交道