formの内容をPOST送信しphpに渡すデータコントロール術

formの中で選択肢の種類を増やし、POST送信してphpに渡すことで、データのコントロールすることができます。
　
前回の記事で、ざっくりとした内容でしたが、formの内容をPOST送信するphpへの簡単なデータの受け渡しをやってみました。
　
今回は、もう少しphpへのデータの受け渡しを深掘りしていきたいと思います。

selectタグで選択データを作成

formの内容をphpに渡すには、POST送信というアクションを起こす必要があります。これですね。

<form method="post">

　
　
そして、ドロップダウンメニューで項目を選択できるようにするには、selectタグとoptionタグを使います。

<select name="ドロップダウンメニューの名前">
<option value="phpに渡す選択肢のデータ">ドロップダウンメニューに表示させる選択肢のデータ</option>
</select>

　
ドロップダウンメニューの名前は、選択されたデータを変数に格納するためにつける名前です。
変数を「lastname」とした場合、変数に格納するためには、$_POST[“lastname”] として格納します。
　

$lastname = $_POST["lastname"];

　
そうすると$lastnameには、実際に選択された「phpに渡した選択肢のデータ」が格納されます。
　
formからphpに受け渡す選択肢のデータが『tanaka』で、ドロップダウンメニューに表示させる選択肢のデータが『田中』だと
　

<select name="lastname">
  <option value="tanaka">田中</option>
</select>

となるわけです。
　
　
実際には、

  田中

　
ドロップダウンメニューには「田中」と表示されてphpには「tanaka」が渡されます。
なのでphpに渡すデータも表示させるデータも『田中』にしたい場合は、

<select name="lastname">
  <option value="田中">田中</option>
</select>

　
ですがこれだとデータが一つしかないので選択肢の意味がありません。
選択肢を増やすためには、optionを増やします。

<select name="lastname">
  <option value="田中">田中</option>
  <option value="井上">井上</option>
  <option value="鈴木">鈴木</option>
</select>

　
　
これで選択肢が増えました。

  田中
  井上
  鈴木

　

と言いたいところですが、このままだと先頭のoptionのデータが表示されます。個人的にこの状態は好きではありません（笑）。何も選択されていない状態がスマートだと思います。
　
なので空白を追加します。

<select name="lastname">
  <option value=""></option>
  <option value="田中">田中</option>
  <option value="井上">井上</option>
  <option value="鈴木">鈴木</option>
</select>

  
  田中
  井上
    鈴木

　
見た目もスッキリ、空白を含めたデータをphpに受け渡すことができます。
　
　
lastnameという名前のselectタグは一つしか作れませんが、違う名前のselectタグを作ることで、いくつものドロップダウンメニューが作れます。
　
　
血液型のドロップダウンメニューを作るなら、

<select name="blood_type">
  <option value=""></option>
  <option value="O型">O型</option>
  <option value="A型">A型</option>
  <option value="B型">B型</option>
  <option value="AB型">AB型</option>
</select>

　
性別だったら

<select name="distinction">
  <option value=""></option>
  <option value="男">男</option>
  <option value="女">女</option>
  <option value="オカマ">オカマ</option>
  <option value="オナベ">オナベ</option>
</select>

　　
これらのドロップダウンメニューのデータを、このように名前を指定してやることで、それぞれ選択された項目をphpで受け取ることができるのです。
　
　
formタグと送信ボタンを含め、phpに受け渡すコードを組み立ててみましょう。

<form action="表示させたいページのURL" method="post">
名前を選択してください。
<select name="lastname">
  <option value=""></option>
  <option value="田中">田中</option>
  <option value="井上">井上</option>
  <option value="鈴木">鈴木</option>
</select>
血液型は？
<select name="blood_type">
  <option value=""></option>
  <option value="O型">O型</option>
  <option value="A型">A型</option>
  <option value="B型">B型</option>
  <option value="AB型">AB型</option>
</select>
性別は？
<select name="distinction">
  <option value=""></option>
  <option value="男">男</option>
  <option value="女">女</option>
  <option value="オカマ">オカマ</option>
  <option value="オナベ">オナベ</option>
</select>
<input type="submit" value="送信">
</form>

　
formのactionには実際に表示するページを記載します。表示させるページに選択内容を送信するために、inputタグでtypeは「submit」、ボタンに「送信」の文字を表示させるためにvalueに「送信」とします。

名前を選択してください。

  
  田中
  井上
  鈴木

血液型は？

  
  O型
  A型
  B型
  AB型

性別は？

  
  男
  女
  オカマ
  オナベ



（※送信されません）

スポンサードリンク
　

fucutions.phpでデータの処理

それではphpに受け渡したデータをどのように処理するのか見ていきましょう。
基本的に、このコードはWordPressの心臓部に当たる、fucutions.phpに追記していくことになります。直接追記するのが怖い人は、「Code Snippets」などのプラグインを利用しましょう。
　
さて、formのデータを表示させるには、
①投稿（固定）ページにショートコードを入力し、投稿（固定）ページで表示させる。
②phpファイルを丸ごと固定ページに読み込んで表示させる。
　
という方法がありますが、②の方法は少し特殊なのでこちらのページをご覧ください。

　
ショートコードはこういうフォーマートで作成します。

function 機能名() {
    処理内容
}
add_shortcode('ショートコード名', '機能名');

　
機能名に何をするショートコードなのかの名前を、ショートコード名には投稿ページで使用する名前、処理内容にどういう処理をするかを記述します。
　
投稿ページでformタグからpost送信しているので、php側では「$_POST」というタグで取り出すことになります。いわゆる変数ですね。
そして、上のselectタグの中から表示させたい項目を指定するために[]を使います。
　
血液型を指定してみます。

function blood_func() {
    return $_POST["blood_type"];
}
add_shortcode('blood_select', 'blood_fuc');

　
機能名はblood_func、ショートコード名はblood_selectにしてみました。
formで指定したページ名を投稿（固定）ページのurlにつけ、 を投稿内容に記述することで選択された血液型を表示させることができます。

血液型は？

  
  O型
  A型
  B型
  AB型

　
　
上は単純に血液型の項目を表示させているだけですが、条件分岐ifを使うことで、このような使い方もできます。

function blood_func() {
    $blood_type = $_POST["blood_type"];
    if($blood_type === "O型"){
      return "今日の運勢は最高です！";
    }elseif($blood_type === "A型"){
      return "今日の運勢はイマイチです…";
　　 }
}
add_shortcode('blood_select', 'blood_func');

血液型は？

  
  O型
  A型

　
　
スポンサードリンク