如何为Form表单的多个提交按钮指定不同的Action地址？

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

最新文章

热门文章