formの外にあるチェックボックスをPost送信？

こんにちは！

HTMLのソース上、または、ページのレイアウト上、一つの<form>タグの外に
配置しざるを得ない<input>要素がある場合があると思います（？）

例えば、添付画像のように、一括操作用のプルダウンメニューと送信ボタンを置いた
Formタグがあり、また、それとは離れた場所にチェックボックスがあるようなケースです。

添付画像は今、勉強用に作成している自作ブログの管理画面なのですが、
記事一覧の左端に並ぶチェックボックスのうち、チェックされた記事を、
上部にある一括操作メニューから一括削除出来る様にしたいと考えています。

そこで、今、つまづいているのが、どのようにして、チェックされた該当の、
各記事IDをPostすることが出来るのかということです。

<form>と</form>の間に挟まれていない、input項目（この場合はチェックボックス）は、
Postしても送信されないと思うのですが、どのように対処するのが宜しいのでしょうか？

javascriptでチェックされた記事のIDを、<form>タグの間に、
<input type="hidden">で、それぞれ、挿入されていくように
実装するという方法は頭に浮かんでいるのですが、
このやり方がベストプラクティスとなりますでしょうか？

経験豊富な先輩方のお知恵を拝借出来ればと思い、
ご質問させて頂きました。

宜しければご返答頂ければ幸いです。

よろしくお願い致しますm(_ _)m

No.3 ベストアンサー 回答者： H240S18B73 回答日時： 2013/08/10 20:17

ページ内にフォームがひとつしかないならそういうことは起こらないですが

投稿フォームと検索フォームが同居してるページで
レイアウト通り作ると投稿フォームが検索フォームを内包しちゃったり
商品の一覧ページとかの商品毎の同じ入力フィールドの値を
個別に送信ボタンとまとめて送信とか違う送信ボタンで使いたいとか

複数フォームがある場合はそういうケースがないことはないですよね

そういう場合ウチは
ボタンだけが外に出るならボタンのonclickでsubmitさせる
泣き別れしたformの値を結合して使わなきゃいけない場合は
jqueryのselializeやselializeArrayを使って送信時に結合して処理
データを拾いたい入力が散在していて個々にはformでくくる必要が
ない場合にはonchangeでhiddenで入れるみたいなカンジの使い分けをしてます

javascriptがないと動かないってのは好ましくないので出来る限り避けますが

この回答へのお礼

ありがとうございます。


>投稿フォームと検索フォームが同居してるページ

まさにおっしゃる通りで、一括操作用のプルダウンメニューと送信ボタンをまとめたフォーム（掲載画像）と、
掲載画像には映ってはいないが同一ページ右端に検索フォームがある状態です。


なるほど。やはり、jsを使って、チェックボックスのonとoffの変更を監視して、
onになったら、該当フォーム内にinput hiddenをDOM操作で追加していくっていう感じになるのですかね。


>javascriptがないと動かないってのは好ましくないので出来る限り避けますが

確かに。。。

CSSのpositioを使って、上手くレイアウトを組むっていう方法も考えないといけないのかもしれないですね～。


ありがとうございました！！！

お礼日時：2013/08/10 21:21

No.2 回答者： play_with_you 回答日時： 2013/08/10 16:42

＞HTMLのソース上、または、ページのレイアウト上、一つの<form>タグの外に

＞配置しざるを得ない<input>要素がある場合があると思います（？）
無い。絶対無い。
<form>はレイアウトに影響しないし、フォームの構造がレイアウトの影響を受けるのもおかしい。
もしかして<form>の中には<input>とか<textarea>とか「フォーム部品」しか入れられないと勘違いしてませんか？

もっと言うとカテ違い。

この回答への補足

>無い。絶対無い。

掲載画像の一括操作ボタンの右端には、また別の検索フォームがあるんです。

つまり、一ページに２つのフォームがあるという状態です。
No3の方がおっしゃっている状態になります。


><form>の中には<input>とか<textarea>とか「フォーム部品」しか入れられないと勘違いしてませんか？

他のページに設置しているformタグ内には、divタグやらtableタグやらいろいろと入れてますよ。

補足日時：2013/08/10 21:16

No.1 回答者： To_aru_User 回答日時： 2013/08/10 16:13

formってそもそもレイアウトに関連しないと思いますが・・・

最悪body全体formで囲んでも誤りではありませんよ。

この回答への補足

コメントありがとうございます。

実はformが同一ページ内に２つあるんです。

補足日時：2013/08/10 21:17