【译】提交到不同URL的表单按钮

[spivet]

原文链接 Separate Form Submit Buttons That Go To Different URLs | CSS-Tricks

这篇文章是我在众成翻译上的译文

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

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

<form action="/submit">
  <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">
  <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>

就这些。