0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

formタグの外の要素もリクエストパラメータに渡したい!を解決する方法

Posted at

結論

<form action='' id='target'>
(中略)
</form>

のように、formにIDを設定しておいて、

<input form='target' name='outform'>

のように、formタグの外でもform要素にformのIDを入れると、formIDをsubmitした際にパラメータを渡せる。

検証コード

CodePenで埋め込もうと思ったけどsubmit(遷移)が必要なのでGitHubPagesでホスティングする。

発端・参考


ポエムとか

元々はReactだとオーバースペックすぎる簡単なWebアプリを作ろうとしていて、手頃なWebフレームワークを探していたところRemixに辿り着いたので、その過程でtableタグとformタグを組み合わせたいシーンが出てきた。
で、いつも何も考えずに

<form ...>
  <table>
    ...
  </table>
</form>

みたいに書いていたのだが、複数のformで値を使い回したいシーンが出てきた。
今回は結局JavaScriptの介入が必要になってしまったのだが、そもそもの話としてformタグの外の要素をformに埋め込むという方法を知らなかったので、凝ったことをしなければ使えそうな気がしたので、formタグの講義資料などでいつか役に立つことを期待する。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?