如何为Form表单的多个提交按钮指定不同的Action地址?
这是我很久以前看到的一个技巧,但我忘记在哪里了,当时遇到这样的需求,做了笔记,现在整理成文章分享出来,因为我感觉这个小技巧还是挺有用的,这种应用场景也算比较常见,比如一个表单有“保存”、“保存草稿”、“预览”多个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地址?的更多相关文章
- 一个form表单,多个提交按钮
技巧就是把提交的input的类型改成button!这样就可以实现多个按钮提交! 以下是案例: <form action="" id="tijiao"> ...
- 一个Form表单多个Submit提交按钮!实现提交不同的参数!
给 submit 的按钮加onclick 方法来自定义预处理参数,比如<script type="text/javascript">function submitFun ...
- 如何为form表单的button设置submit事件
若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交
- form表单用ge方式提交时ie显示中文参数乱码
有网友说 通过给form表单添加accept-charset="gb2312"和 onsubmit="document.charset='gb2312'" 但这 ...
- form表单的两种提交方式,submit和button的用法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...
- 触发form表单的两种提交方式,submit和button的用法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面 ...
- form表单有条件的提交
form表单提交数据,比如,积分,score,在0--100之间 var score = $('#score').val(); if(score !=''){ if(isNaN(score)){ la ...
- form表单以get方式提交时action中?后面的参数部分不生效
form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!
- 【转载】form表单的两种提交方式,submit和button的用法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...
随机推荐
- JavaWeb开发规范
以下的建议将帮助你更有效地使用本文所描述的 Java 编程标准: ******************************************************* 当你写代码时就应该遵守 ...
- 如何使用thrift 服务引擎组件
在本文中将介绍如果通过thrift 组件集成到surging 微服务引擎中,然后可以选择dotnetty 或thrift作为服务远程调用RPC,也可以通过其它语言的thrift 调用surging 服 ...
- python-文件字符分布【get()函数与.sort(key=lambda x:x[0],reverse = False)】
文件字符分布 描述 统计附件文件的小写字母a-z的字符分布,即出现a-z字符的数量,并输出结果. ...
- C++中const的特性
目录(作用): 1:修饰变量,说明该变量不可以被改变: 2:修饰指针,分为只想常量的指针和自身是常量的指针 3:修饰引用,指向常量的引用,用于修饰形参,即避免了拷贝,有避免了函数对值的修改: 4:修改 ...
- Java——字节和字符的区别
字节 1.bit=1 二进制数据0或1 2.byte=8bit 1个字节等于8位 存储空间的基本计量单位 3.一个英文字母=1byte=8bit 1个英文字母是1个字节,也就是8位 4.一个汉字= ...
- Spring 中基于 AOP 的 @AspectJ注解实例
@AspectJ 作为通过 Java 5 注释注释的普通的 Java 类,它指的是声明 aspects 的一种风格.通过在你的基于架构的 XML 配置文件中包含以下元素,@AspectJ 支持是可用的 ...
- vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
框架介绍 这是一个基于vue.element-ui.iview..netcore3.1 可支持前端.后台动态扩展业务代码快速开发框架. 框架内置定制开发的代码生成器,生成的代码不需要复制也不需要更改, ...
- Leetcode_45. 跳跃游戏 II
每个位置i有一个最大跳跃距离,求最小步数从0跳到n-1. dp[i]表示从0跳到i的最少步数,显然可以转移的状态就是从i-a[i]到i-1. 因为是最小步数,考虑用优先队列优化,再考虑到状态有范围的, ...
- JUC之ReentrantLock源码分析
ReentrantLock:实现了Lock接口,是一个可重入锁,并且支持线程公平竞争和非公平竞争两种模式,默认情况下是非公平模式.ReentrantLock算是synchronized的补充和替代方案 ...
- JDBC11 封装+资源配置文件管理
封装为Utils类+程序资源文件去配置 public class Utils { static Properties p=null; static { p=new Properties(); try ...