checkbox、 戻るボタン、年月セレクト、完了画面
次に、add.ctp 入力フォームの、Favorite（好きな物）が multiple セレクトになってるのを直します。
日本では複数選択にセレクトなんてほとんど使われないですよね。
こうなっているのを、
echo $this->Form->input('Favorite');
こうします。
echo $this->Form->input('Favorite', array('multiple'=>'checkbox', 'label' => '好きな物'));
これでとりあえずチェックボックスになるんですが、
どうも一つのチェックで一行になっているので収まりが悪いです。
横に並べたいですね。
生成されたHTMLを確認すると、以下のようになっています。
<div class="input select">
<label for="FavoriteFavorite">好きな物</label>
<input type="hidden" id="FavoriteFavorite" value="" name="data[Favorite][Favorite]">
<div class="checkbox">
<input type="checkbox" id="FavoriteFavorite1" value="1" name="data[Favorite][Favorite][]">
<label for="FavoriteFavorite1">apple</label>
</div>
<div class="checkbox">
<input type="checkbox" id="FavoriteFavorite2" value="2" name="data[Favorite][Favorite][]">
<label for="FavoriteFavorite2">orange</label>
</div>
<div class="checkbox">
<input type="checkbox" id="FavoriteFavorite3" value="3" name="data[Favorite][Favorite][]">
<label for="FavoriteFavorite3">grape</label>
</div>
</div>
チェックボックス一つにつき一つの div で囲まれています。
css を書くのもしんどいので、jQuery で処理することにします。
jQuery をダウロードして解凍しておいてください。
/app/webroot/js 以下に jquery.js としてコピーしておきます。
で、さらに /app/webroot/js 以下に、新規に util.js という名前でファイルを作ります。
中身は、こんな感じで。
$(document).ready(function() {
$('div.checkbox').css('display','inline');
$(':checkbox').css('float','none');
});
周りを囲んでいる div を inline 表示に変えて、左に float しているチェックボックスの float を解除しているだけです。
で、 add.ctp の一番上に、
<?php echo $javascript->link(array('jquery','util'), false); ?>
を追加します。
さらに、members_controller.php の 上の方に $helpers を追加します。
<?php
class MembersController extends AppController {
var $name = 'Members';
var $helpers = array('Javascript');
function index() {
$this->Member->recursive = 0;
$this->set('members', $this->paginate());
}
ブラウザで確認してみると、チェックボックスが横に並んでいます。
これはあくまでその場しのぎの付け焼刃ですので、本来はきちんとデザイナーさんに css を書いてもらいましょう。
ついでなので、さきほどのJavascriptの util.js の $(document).ready(function() {});の中に、以下を追加しておきます。
$('#back').click(function(){
$('#MemberMode').val('back');
$("#MemberConfirm").submit();
});
解説：
1行目：id="back" のボタンをクリックしたら
2行目：id="MemberMode" の valueを "back" にして(hidden で追加した mode の value です）
3行目：id="MemberConfirm" のフォームをサブミットする（確認画面の form です）
confirm.ctp の一行目に以下を追加します。
<?php echo $javascript->link(array('jquery','util'), false); ?>
members_controller.php の前回追加した if ～ else の中に以下の elseif を追加します。{} の中は空でいいです。
if ($this->data['Member']['mode'] == 'confirm') {
//・・・
} elseif ($this->data['Member']['mode'] == 'back') {
} else {
//・・・
}
これで、確認画面から入力画面への「戻る」ボタンが動くようになります。
いろいろエラーが出ているかもしれませんが、たいした問題ではないので気にしないで進みます。
あとは、誕生日の入力フォームが洋風で気に入らないので、変更します。
今こうなってるのを、
echo $form->input('birthday');
以下に変更します。
echo $this->Form->input('birthday',array('dateFormat'=>'YMD','maxYear'=>date('Y'),'minYear'=>date('Y')-100,'monthNames'=>false, 'label' => array('text'=>'誕生日')));
最後、一応公開側は完了画面を出すことにするので、「登録されました」みたいな適当なビューを complete.ctp という名前で作っておきます。
<div class="members form">
<h2><?php __('会員登録'); ?></h2>
<p>登録されました。</p>
</div>
そして、members_controller.php の add アクションの save の後の、
$this->redirect(array('action' => 'index'));
となっているのを、
$this->redirect(array('action' => 'complete'));
に変更し、さらに、
function complete() {
}
を追加しておきます。ブラウザで完了画面が表示されることを確認します。
