前回：最低限の機能を備えたメールフォームを作ってみたい【願望】
前回は「入力」⇒「確認」⇒「完了」の流れを作りました。
次は、POSTされる情報と、name値について。
■STEP1
まずは超基本的なことですが、name値を付けて送信すると、連想配列の形で送信されます。
|
1 2 3 4 |
<input type="text" name="text1" value="内容１"> <!--日本語のname値も可能--> <input type="text" name="項目" value="内容２"> |
|
1 2 3 4 5 |
Array ( [text1] => 内容１ [項目２] => 内容２ ) |
つまり、エラーなどで「入力ページ」に戻す仕様にしたような場合には、
|
1 |
<input type="text" name="text1" value="<?php echo $_POST['text1']; ?>"> |
としておけば、入力された状態で表示されます。
また、「確認ページ」の際は
|
1 2 |
<?php echo $_POST['text1']; ?> <input type="hidden" name="text1" value="<?php echo $_POST['text1']; ?>"> |
として、表示する＋hiddenフィールドに設定して、送信プログラムに飛ばせるようにします。
ちなみにこれは僕はこうしたってだけで一般的にどう作ってるかは知りませんので参考の一つにしてください。
$_POST配列をシリアライズしてひとつのhiddenフィールドで次に送ったり色々やり方はあるかと思います。
■STEP2
次は、多次元配列の形で送信する方法です。
たとえば「姓・名」や「電話番号」など、事実上ひとつの項目だが分けたいものなどは、「name[]」のようにするとひとつの配列として扱ってくれます。
|
1 2 3 4 5 6 7 8 |
<input type="text" name="name[]" placeholder="姓" value=""> <input type="text" name="name[]" placeholder="名" value=""> <input type="text" name="tel[]" value=""> - <input type="text" name="tel[]" value=""> - <input type="text" name="tel[]" value=""> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Array ( [name] => Array ( [0] => やまだ [1] => たろう ) [tel] => Array ( [0] => 080 [1] => 2525 [1] => 4545 ) ) |
PHPで言うところの、配列の最後に追加するときの書き方と同じですかね。もちろん、[]の中に予め数字を入れておいても同様の結果となります。
|
1 2 |
<input type="text" name="name[0]" placeholder="姓" value=""> <input type="text" name="name[1]" placeholder="名" value=""> |
|
1 2 3 4 5 6 7 8 |
Array ( [name] => Array ( [0] => やまだ [1] => たろう ) ) |
確認画面に来た際には、分けておく必要が特別なければ下記のように書いてしまっていいのではないでしょうか。
|
1 2 3 4 5 6 |
<?php echo implode('-', $_POST['tel']); ?> <input type="hidden" name="tel" value="<?php echo implode('', $_POST['tel']); ?>"> <!-- ↓実際の出力↓ --> 080-2525-4545 <input type="hidden" name="tel" value="08025254545"> |
■STEP3
発展系ですが、たとえば欲しい商品の数分だけ枠を増やせるようにして「確認ページ」へも対応する方法です。
先ほどのSTEP2のDEMOのような商品の枠を増やせるようにします。
しかし先ほどのname値では少し扱いづらくなってしまうので、ひとつ目の枠を下記のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table> <tr> <th rowspan="3">商品1</th> <td><input type="text" name="product[0][name]" value=""></td> </tr> <tr> <td> <label><input type="radio" name="product[0][size]" value="S" checked>S</label> <label><input type="radio" name="product[0][size]" value="M">M</label> <label><input type="radio" name="product[0][size]" value="L">L</label> </td> </tr> <tr> <td> <select name="product[0][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </td> </tr> </table> |
そうすると$_POSTの配列は下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Array ( [product] => Array ( [0] => Array ( [name] => [size] => S [num] => 1 ) ) ) |
これを、0、1、2…と増やしていけるようにすればいいですね。
ここからはJavaScriptの段階になるので次回、バリデートと含めて書きます。