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 をダウロードして解凍しておいてください。

• 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() {
}

• >>目次へ
• >>次のページ「checkbox の validate」へ
• <<前のページ「確認画面その2」へ