如何为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的前端页面的 ...
随机推荐
- 开始导入第一个第三方库jieba
在做python的练习题,想看看运行结果. 谁知,有道题,不能识别jieba,原来要导入,因为是第三方库,照着书里面的导入方法,有三种,一种是用pip,在命令行里面安装,使用pip - p 可以查看p ...
- P1518 两只塔姆沃斯牛 The Tamworth Two(简单的搜索题)
题目描述 两只牛逃跑到了森林里.农夫John开始用他的专家技术追捕这两头牛.你的任务是模拟他们的行为(牛和John). 追击在10x10的平面网格内进行.一个格子可以是: 一个障碍物, 两头牛(它们总 ...
- 图论--树的直径--DFS+树形DP模板
#include <iostream> #include <cstring> using namespace std; //maxv:源点能到的最远点,maxdis:最远点对应 ...
- 洛谷 P1816 忠诚 ST函数
题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...
- Fiddler手机端抓包环境设置与过滤(一)
一.PC端Fiddler设置 1.安装https 证书 打开Fiddler->Tool->Fiddler Options->HTTPS tab,勾选上并Capture HTTPS C ...
- golang关键字select的三个例子, time.After模拟socket/心跳超时
golang关键字select的三个例子, time.After模拟socket/心跳超时 例子1 select会随机选择一个可执行的case // 这个例子主要说明select是随机选择一个 ...
- python数据统计分析
1. 常用函数库 scipy包中的stats模块和statsmodels包是python常用的数据分析工具,scipy.stats以前有一个models子模块,后来被移除了.这个模块被重写并成为了 ...
- P2422 良好的感觉(两头单调)
描述:https://www.luogu.com.cn/problem/P2422 kkk做了一个人体感觉分析器.每一天,人都有一个感受值Ai,Ai越大,表示人感觉越舒适.在一段时间[i, j]内,人 ...
- E - No Pain No Game 线段树 离线处理 区间排序
E - No Pain No Game HDU - 4630 这个题目很好,以后可以再写写.这个题目就是线段树的离线写法,推荐一个博客:https://blog.csdn.net/u01003321 ...
- CC2530ADC应用
ADC单通道外部电压采集 需要设置一个上机位命令控制字符. 系统时钟初始化——32MHZ晶振 串口0函数初始化——设置串口对应引脚,波特率,清楚中断标志 串口0接收中断响应函数——U0DBUF将控制命 ...