こんにちは!
HTMLのソース上、または、ページのレイアウト上、一つの<form>タグの外に
配置しざるを得ない<input>要素がある場合があると思います(?)
例えば、添付画像のように、一括操作用のプルダウンメニューと送信ボタンを置いた
Formタグがあり、また、それとは離れた場所にチェックボックスがあるようなケースです。
添付画像は今、勉強用に作成している自作ブログの管理画面なのですが、
記事一覧の左端に並ぶチェックボックスのうち、チェックされた記事を、
上部にある一括操作メニューから一括削除出来る様にしたいと考えています。
そこで、今、つまづいているのが、どのようにして、チェックされた該当の、
各記事IDをPostすることが出来るのかということです。
<form>と</form>の間に挟まれていない、input項目(この場合はチェックボックス)は、
Postしても送信されないと思うのですが、どのように対処するのが宜しいのでしょうか?
javascriptでチェックされた記事のIDを、<form>タグの間に、
<input type="hidden">で、それぞれ、挿入されていくように
実装するという方法は頭に浮かんでいるのですが、
このやり方がベストプラクティスとなりますでしょうか?
経験豊富な先輩方のお知恵を拝借出来ればと思い、
ご質問させて頂きました。
宜しければご返答頂ければ幸いです。
よろしくお願い致しますm(_ _)m
No.3ベストアンサー
- 回答日時:
ページ内にフォームがひとつしかないならそういうことは起こらないですが
投稿フォームと検索フォームが同居してるページで
レイアウト通り作ると投稿フォームが検索フォームを内包しちゃったり
商品の一覧ページとかの商品毎の同じ入力フィールドの値を
個別に送信ボタンとまとめて送信とか違う送信ボタンで使いたいとか
複数フォームがある場合はそういうケースがないことはないですよね
そういう場合ウチは
ボタンだけが外に出るならボタンのonclickでsubmitさせる
泣き別れしたformの値を結合して使わなきゃいけない場合は
jqueryのselializeやselializeArrayを使って送信時に結合して処理
データを拾いたい入力が散在していて個々にはformでくくる必要が
ない場合にはonchangeでhiddenで入れるみたいなカンジの使い分けをしてます
javascriptがないと動かないってのは好ましくないので出来る限り避けますが
ありがとうございます。
>投稿フォームと検索フォームが同居してるページ
まさにおっしゃる通りで、一括操作用のプルダウンメニューと送信ボタンをまとめたフォーム(掲載画像)と、
掲載画像には映ってはいないが同一ページ右端に検索フォームがある状態です。
なるほど。やはり、jsを使って、チェックボックスのonとoffの変更を監視して、
onになったら、該当フォーム内にinput hiddenをDOM操作で追加していくっていう感じになるのですかね。
>javascriptがないと動かないってのは好ましくないので出来る限り避けますが
確かに。。。
CSSのpositioを使って、上手くレイアウトを組むっていう方法も考えないといけないのかもしれないですね~。
ありがとうございました!!!
No.2
- 回答日時:
>HTMLのソース上、または、ページのレイアウト上、一つの<form>タグの外に
>配置しざるを得ない<input>要素がある場合があると思います(?)
無い。絶対無い。
<form>はレイアウトに影響しないし、フォームの構造がレイアウトの影響を受けるのもおかしい。
もしかして<form>の中には<input>とか<textarea>とか「フォーム部品」しか入れられないと勘違いしてませんか?
もっと言うとカテ違い。
この回答への補足
>無い。絶対無い。
掲載画像の一括操作ボタンの右端には、また別の検索フォームがあるんです。
つまり、一ページに2つのフォームがあるという状態です。
No3の方がおっしゃっている状態になります。
><form>の中には<input>とか<textarea>とか「フォーム部品」しか入れられないと勘違いしてませんか?
他のページに設置しているformタグ内には、divタグやらtableタグやらいろいろと入れてますよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript Google reCAPTCHAについて 1 2023/02/22 14:37
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストリンクをPOST送信したい
-
PHPのエラーの解消法について教...
-
HTML_QuickForm_Renderer_Array...
-
Submit(送信ボタン)を押した...
-
formの外にあるチェックボック...
-
PHPの質問:フォームから受け取...
-
フォームで作った送信ボタンが...
-
フォーム送信後の更新ボタンで...
-
PHPの関数実行
-
チェックボックスの初期選択と...
-
phpでの複数選択チェックボック...
-
パラメーターを隠す
-
laravelを利用してコントロール...
-
scanfでの読み込み文字数制限
-
VBA で、スペースを含むファイ...
-
PHPでフォームから任意の画像削...
-
[Smarty] 空の変数は0に反応す...
-
extract($_POST)
-
PHPのsubmitボタンが複数ある場合
-
チェックボックスの値のチェック
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
PHPでURLにジャンプするには?
-
フォーム送信後の更新ボタンで...
-
PHPのエラーの解消法について教...
-
テキストリンクをPOST送信したい
-
JavaScript変数をPHPへ渡す
-
セッションを使わずに遷移先画...
-
PHPでファイルアップロード時に...
-
フォームで作った送信ボタンが...
-
phpで、フォームのラジオボタン...
-
$_POST['hoge']のデータをフラ...
-
ボタンをクリックでPHP文を実行
-
ローカルにあるhtmlのフォーム...
-
フォームでの記入項目
-
POSTデータをフォームに残す方法
-
Submit(送信ボタン)を押した...
-
なぜ、unexpected T_VARIABLEに...
-
formの外にあるチェックボック...
-
PHP 入力フォームにて半角スペ...
-
アマゾンのような評価の星を選...
-
サブウィンドウのFORM内データ...
おすすめ情報