這是我很久以前看到的一個技巧,但我忘記在哪里了,當時遇到這樣的需求,做了筆記,現在整理成文章分享出來,因為我感覺這個小技巧還是挺有用的,這種應用場景也算比較常見,比如一個表單有“保存”、“保存草稿”、“預覽”多個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>
是不是很簡單,希望對你有所幫助。