前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >提交到不同URL的表单按钮

提交到不同URL的表单按钮

作者头像
疯狂的技术宅
发布2019-03-27 16:04:10
2K0
发布2019-03-27 16:04:10
举报
文章被收录于专栏:京程一灯

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

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

代码语言:javascript
复制
<form action="/submit">

  <!-- inputs and stuff -->

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

</form>

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

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

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

代码语言:javascript
复制
<input type="submit" name="action" value="Value-1">
<input type="submit" name="action" value="Value-2">

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

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

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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 闭包



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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-09-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档