ひとつのボタンから複数の情報を送る (HTMLでPOST、そしてhidden)

formでユーザの入力やファイルを送信する際、IDを付与したり、送信した情報を紐付けるか、などの情報を一緒に送信したい場合があります。
その場合、ID情報はブラウザに表示しないのがベストです。ユーザに見せたり、編集してもらう必要はありません。

 わたしの場合、10個の画像が並んだ画像一覧ページで、画像ひとつずつにコメント欄があり、どの画像に対するコメントなのか特定する必要がありました。

「画像にコメントを付けられるサイト」のスクリーンショット(一部を切り出したもの)



追記:「fancyBoxで装飾したフォームからPOSTを送信する」方法とサンプルコードを公開しました。


formによる送信は、送る側でnameとvalueを指定すると、受け取る側で$_POST連想配列の中身として情報を受け取れる、という仕組みになっています。
例:
送信する側 (HTML)
    <input name="name" value="string value or other.">
受信する側 (PHP)
    $inValue = $_POST["name"];
 
今回の場合、情報をまとめて送り、受け取る側では、$_POSTを配列として扱うことで、
    //画像に対するコメントを保存
    saveComment ($_POST["imagename"], $_POST["comment"]);
などと書きたいわけです。

これを実現する方法として、 inputタグのtype="hidden" を使います。
ユーザを惑わせることなく、複数の情報を同時に送信できるようになります。


なお、検索すると、JavaScriptでpostするという解決法が出てきますが、そんなに大げさなことをする必要はありません。(それに、JavaScriptが無効にされていたら情報が送信できなくなります。)


POST(GETでもよいですが)で送信する側

HTMLで以下のように書きます。
例:
    <form action="capture_post.php" method="post">
        <p>
        コメント:<br>
        <input type="hidden" name="imgname" value="samplefile.png">
        <textarea name="comment" rows="3" cols="30"></textarea><br>
        <input type="submit" name="button">
        </p>
    </form>

なお、この例ではPOSTを受け取るページ(formタグのactuon要素)はcapture_post.phpとなっています。action="#"と書くことで、このページ自身をPOSTの受け取りページとして指定することもできます。
ボタンを押すと、ブラウザは新しいページを要求しながらPOSTデータを送ります。ページ側では、次の「受け取る側」PHPコードを書いて、POSTデータを受け取ります。

受け取る側


HTML中のPHPで以下のように書きます。
この例では、コメントがあった際に、指定されたファイル名と書き込まれたコメントを表示しています。
例:
  function capture_comment(){
      if ("" == $_POST["comment"]){
          return false;
      }
      print "コメント:" . $_POST["imgname"] . "<br>\n";
      print $_POST["comment"] ."<br>\n";
  }

※本番環境で使う場合は、セキュリティのためにPOSTメッセージを変換する必要があります。

POST結果の表示例(一部を切り出したもの)
POST結果の表示例(一部を切り出したもの)
上のスクリーンショットはPOSTテストのための簡単な表示です。
実際にコメントをサイトに表示する際には、もっと見やすくてわかりやすいデザインをする必要があります。

1 件のコメント:

  1. Harrahs Casino - Jordan 16 Retro
    Harrahs Casino has a huge range of slot machines in the rooms. They have a 통협 selection of over 700 titles that have 스포츠토토 구입 샤오미 different types of air jordan 18 stockx good site game. air jordan 18 retro yellow suede from us You can play where can i find air jordan 18 retro yellow suede at Harrah's

    返信削除

加湿器をYAMAZEN KS-F407(WH) に買い替え

 YAMAZENの加熱式加湿器  KS-F407(WH) を買いました。 超音波式は家電へのカルキ集積と衛生管理の問題、あと部屋を温めるのにも都合が良いことから、熱加湿器を選んでいます。 当時2000円台の小さな加湿器で5年近くやってきていたのですが、そろそろ水漏れなどしてきた...