这是我很久以前看到的一个技巧,但我忘记在哪里了,当时遇到这样的需求,做了笔记,现在整理成文章分享出来,因为我感觉这个小技巧还是挺有用的,这种应用场景也算比较常见,比如一个表单有“保存”、“保存草稿”、“预览”多个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. React技术栈——Redux

    Redux 1.Redux是什么?   Redux对于JavaScript应用而言是一个可预测状态的容器.换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJs ...

  2. 写代码?程序猿?你不能不懂的八大排序算法的Python实现

    信息获取后通常需要进行处理,处理后的信息其目的是便于人们的应用.信息处理方法有多种,通常由数据的排序,查找,插入,删除等操作.本章介绍几种简单的数据排序算法和高效的排序算法. 本章主要涉及到的知识点有 ...

  3. CF思维联系– Codeforces-988C Equal Sums (哈希)

    ACM思维题训练集合 You are given k sequences of integers. The length of the i-th sequence equals to ni. You ...

  4. P3306 [SDOI2013]随机数生成器(bzoj3122)

    洛谷 bzoj 特判+多测真恶心 . \(0\le a\le P−1,0\le b\le P−1,2\le P\le 10^9\) Sample Input 3 7 1 1 3 3 7 2 2 2 0 ...

  5. CF1316C Primitive Primes

    CF1316C [Primitive Primes] 给出两个多项式\(a_0+a_1x+a_2x^2+\dots +a_{n-1}x^{n-1}\)和\(b_0+b_1x+b_2x^2+ \dots ...

  6. 实现MapReduce

    简介 当我们要统计数亿文本的词频,单个机器性能一般,况且是数亿级数据,处理是十分缓慢的,对于这样的任务,希望的是多台电脑共同处理,大幅度减少任务时间.联合多台电脑一起工作的系统就是分布式系统. 最近在 ...

  7. 题目分享E 二代目

    题意:一棵点数为n的树,每个节点有点权,要求在树中中找到一个最小的x,使得存在一个点满足max(该点点权,该点相邻的点的点权+1,其他点的点权+2)=x 分析:首先要能把题目转化为上述题意 首先题目让 ...

  8. SQLite使用(一)

    简单介绍SQLite常用API: int sqlite3_open( const char *filename, /* Database filename (UTF-8) */ sqlite3 **p ...

  9. Scrapy - Request 中的回调函数callback不执行

    回调函数callback不执行 大概率是被过滤了 两种方法: 在 allowed_domains 中加入目标url 在 scrapy.Request() 函数中将参数 dont_filter=True ...

  10. GP1UM26(78)1RK远程红外遥控接收IC数据手册学习

    1.Features 该系列IC具有多种BMP带通频率可供选择,典型的GP1UM261RK带通频率为38KHz,内部的前置放大器等放大电路工作频率均为38KHz. Compact紧凑型,体积小 2.i ...