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

    2019独角兽企业重金招聘Python工程师标准>>> 1.在每个覆盖了equals 方法的类中,也必须覆盖hashCode 这是关于hashCode 的通用约定 这样可以与 基于散 ...

  2. POJ - 2251 Dungeon Master(搜索)

    You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed of un ...

  3. 精通awk系列文章

    精通awk系列文章 我录制了两个awk相关的视频教程: Awk经典实战案例精讲 精通awk精品课程:awk从入门到精通 1.安装新版本的gawk 2.本教程测试所用示例文件 3.铺垫知识:读取文件的几 ...

  4. I - Union 2019ccpc女生赛

    I - Union 这是2019女生赛最难的一个题目,但是现在去写,我觉得没有想象之中的那么难. 把这个题目分成几个部分来考虑. 假设给你k个数,让你分成三个集合,满足这四个条件,且不需要考虑时间和空 ...

  5. 2019国防科大校赛 B Escape LouvreⅡ

    https://ac.nowcoder.com/acm/contest/878/B 这个题目是一个网络流,但是建图却没有那么好建,首先我们都会把每一个人与源点相连,每一个洞口和汇点相连. 然后人和洞口 ...

  6. 教你配置windows上的windbg,linux上的lldb,打入clr内部这一篇就够了

    一:背景 1. 讲故事 前几天公众号里有位兄弟看了几篇文章之后,也准备用windbg试试看,结果这一配就花了好几天,(づ╥﹏╥)づ,我想也有很多跃跃欲试的朋友在配置的时候肯定会遇到这样和那样的问题,所 ...

  7. 【Hadoop离线基础总结】Yarn集群的资源调度

    Yarn集群的资源调度 介绍 概述 Yarn是 Hadoop 2.x 引入的新的资源管理系统模块,主要用于管理集群当中的资源(主要是服务器的各种硬件资源,比如内存.CPU等),它不光管理硬件资源,还管 ...

  8. 这是一篇致力于解决Linux小白无法安装tunctl工具的文章

    计算机网络——搭建Linux下的实验环境并成功安装tunctl 各位如果是来解决安装tunctl的问题的,请直接到2.2部分的内容. 这个学期终于迎来了计算机网络这门课程,也终于能够进一步了解让我无数 ...

  9. 不卸载Nginx隐藏版本号

    [修改配置文件](不卸载Nginx隐藏版本号,直接修改配置文件) Linux环境: [root@localhost nginx-1.16.1]# curl -I http://10.56.1.115  ...

  10. JS的函数和对象二

    复习 递归,在函数内部调用自身  return 匿名函数  function(){   } 创建函数,函数表达式  var fn=function(){   } 自调用   (function(){ ...