如何為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>

是不是很簡單,希望對你有所幫助。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM