专栏首页京程一灯提交到不同URL的表单按钮

提交到不同URL的表单按钮

这是几天前想到的,我忘了在哪,但是我把它记在了我的小笔记本上,打算发到博客里。我把它写下来是因为我听到一些把它过于复杂化的东西。

听说你有一个像下面这样的表单:

<form action="/submit">

  <!-- inputs and stuff -->

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

</form>

当你提交表单,它会跳转到/submit。 然后你需要 另一个 提交按钮,跳转到不同的URL。为什么需要这样做不重要,任何事都有原因,毕竟网页包含太多东西。

我找到了一些人们尝试处理这个问题的其它方法。

其中一种方法是放弃提交到不同的URL,但是给每个提交按钮一个相同的name,不同的value,然后当需要处理不同问题时检查value值。

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

你可以在处理时读取value值,并且如果你想,还可以进行重定向。对于所述问题,这是一种解决办法。

另一种方法是在按钮点击时,通过JavaScript改变form的行为。有好几种方法实现,但是都归结为:

<form name="form">

  <!-- inputs and stuff -->

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

</form>

它依赖于JavaScript工作,也不是很麻烦,但是它对渐进式增强的友好性,也的确不像它能做到的那样好。

正确的答案HTML已经为你想到了。我猜它或许并没有像它应该的那样众所周知,因此才有了这篇文章。

它是formaction属性,你可以直接放在提交按钮里,它会覆盖表单自己的action

<form action="/submit">

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

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

</form>

就这些。


往期精选文章

ES6中一些超级好用的内置方法

浅谈web自适应

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 配置一个简单而实用的 JavaScript 开发环境

    根据我的经验,写一个模块或 CLI 工具前你所要做的第一件事就是设置一个开发环境。对这个步骤有人喜欢有人愁。但不管怎样,它可能总是花掉你很多时间,你得不停地调整...

    疯狂的技术宅
  • 8月24日【每日一题】解析

    3.我用了eval LexicalEnvironment中的任何变量不进行解除绑定 所以选B 如果我用widnow.eval或者没用 上面的arr直接回收

    疯狂的技术宅
  • 程序员的三十岁究竟在迷茫什么?

    这是京程一灯一位学员找工作的时候,还没谈技术之前的面试条件。三十岁已经成了程序员的一道坎儿。

    疯狂的技术宅
  • MICROSOFT REPORT VIEWER 2012之无法加载相关的dll

    使用VS 2012开发报表, 如果是使用的微软的报表控件的话,默认是使用的MICROSOFT REPORT VIEWER 2012,本地开发基本上没问题,但是一...

    雪雁-心莱科技
  • 德州农工大学开源RLCard:帮你快速训练会斗地主的智能体

    RLCard 是一个用于牌类游戏强化学习研究的开源工具包,其接口简单易用,支持多种牌类环境。RLCard 的目标是在强化学习与非完美信息博弈之间搭建桥梁,推动强...

    机器之心
  • 全链路适配SRT,腾讯云直播平台再升级

    在今年10-11月份刚过去的英雄联盟S9总决赛中,SRT作为跨洋远距离传输方案,在源流制作环节中承担主线路的角色,稳定支持了总决赛的每一场比赛。目前腾讯视频云已...

    腾讯云视频
  • 拆解SRT:新UDP视频传输协议

    大家好,我是Twitch的视频工程师,今晚我的演讲主题是SRT协议的内幕。在过去,我看过许多关于支持SRT功能的软解的精彩演讲以及它的各种潜能。但是今天,我将掀...

    LiveVideoStack
  • Excel小技巧31:引用工作表或工作簿

    在使用公式时,我们可以引用不同工作表甚至是不同工作簿中的单元格或单元格区域。其一般语法是:

    fanjy
  • Ubuntu上安装flashplayer

    我使用的是Ubuntu 12.04.4 LTS,由于firefox无法播放flash所以去下载了一个adobeflashplayer插件,结果安装好后弹出err...

    racaljk
  • 腾讯云标准型S2 与标准型S1 服务器配置价格区别及如何选择?

    腾讯云标准型S2 与标准型S1 服务器配置性能价格区别在哪?如何选择?标准型S2 和标准型S1 这两款机型都是腾讯云服务器标准型系列主机中的一款。其中标准型 S...

    魏艾斯博客www.vpsss.net

扫码关注云+社区

领取腾讯云代金券