CakePHPで、AjaxとjQueryを用いてフォーム入力(Form)を実装するための方法
Ajaxを用いたフォーム入力を実装するための方法です。
①
まず、CakePHPでフォームを作る。
<?php
echo $this->Form->Create('Model');
echo $this->Form->input('year', array(
'type' => 'date',
'empty' => ' ',
'selected'=>array(
'year' =>' ',
'month'=>' ',
'day' =>' ',
),
'dateFormat' => 'YMD',
'monthNames' => false,
'minYear' => date('Y')-2,
'maxYear' => date('Y')+0,
'label'=>false
));
echo $this->Form->input('bbbb',array('type'=>'text','label'=>false,'div'=>false));
echo $this->Form->input('cccc',array('type'=>'text','label'=>false,'div'=>false));
echo $this->Form->end();
とか色々。
②
フォームの部分で右クリックをして「要素の検証」を行い、
入力フォームのname属性を確認。
③
そうしたら、それらを用いて、入力フォームの内容を拾うリストをつくる。
例えば、要素を検証して、name属性が data[aaaa][bbbb][cccc]
となっていたとして、その要素が年のデータだとしたら
適当にyear という名前をつけてあげる。
同じように、 aaaa, bbbb という名前の要素があるとしましょう。
それらを、リストにして
var formList = { //formListという名前の変数にリストを入れる
year : '[name="data[aaaa][bbbb][cccc]"]',
bbbb: '[name="data[dddd][eeee][ffff]"]',
cccc: '[name="data[gggg][hhhh][iiii]"]'
}
このようにして、{ }の中にフォームの内容をリスト形式にして入れていく。
並べるのは
要素の名前 : '[name="要素の属性"]'
これが書き方のテンプレートです。シングルクォーテーション'とダブルクオーテーション"の使い分けに気をつけましょう。
(上記のnameの名前は自分で考えるものです。""の中のname属性は、フォームの要素を検証して探し、自分で編集しましょう。）
④
ここまできたら、とりあえず全体のコードを見てみましょう。
$(".submit input").on("click",function(e){
e.preventDefault();
var parent = $(this).parents("Form"); //thisはクリックされた要素
var formList = {
year : '[name="data[aaaa][bbbb][cccc]"]',
bbbb: '[name="data[dddd][eeee][ffff]"]',
cccc: '[name="data[gggg][hhhh][iiii]"]'
}
こんな感じになっているはずです。（まだ途中です）
var parent = $(this).parents("Form");
の部分では、クリックされた要素（投稿ボタン）の親要素の
フォーム入力要素をすべて拾っています。
⑤
次は、リストの値を実際に入れます。
.val() を使って値を取ります。
var sendList = {
year : parent.children(formList.year).val(),
bbbb : parent.children(formList.bbbb).val(),
cccc : parent.children(formList.cccc).val()
};
childrenを使って、先ほど作ったリストから、
値を取ってきています。
これで、フォームで送るデータの下準備が完了しました！
⑥
ajaxでデータを送ります。
$.ajax({
url: "/formInputs/add",//フォーム処理をするコントローラ、アクションのURL。この場合FormInputsControllerにaddというアクションがあります
data: sendList,
dataType: "json",
type: "POST",
success: function(obj) {
console.log(obj);
console.log('大成功');
}
})
⑦
以上をまとめてみると
$(".submit input").on("click",function(e){
e.preventDefault();
var parent = $(this).parents("Form"); //thisはクリックされた要素
var formList = {
year : '[name="data[aaaa][bbbb][cccc]"]',
bbbb: '[name="data[dddd][eeee][ffff]"]',
cccc: '[name="data[gggg][hhhh][iiii]"]'
}
//console.log( parent.children(formList.gakka).val() );
var sendList = {
year : parent.children(formList.year).val(),
bbbb : parent.children(formList.bbbb).val(),
cccc : parent.children(formList.cccc).val()
};
console.log(sendList);
$.ajax({
url: "/formInputs/add",//追加する場所
data: sendList,
dataType: "json",
type: "POST",
success: function(obj) {
console.log(obj);
console.log('大成功');
}
})
});
このような感じですね！
動かなかったらコメント下さい。
⑧
次はCakePHPのデータ受け取り側のアクションをいじります。
先ほどフォームの内容を送ったaddアクションのソースコードに移動してください。
public function add(){
if($this->request->is('ajax')){ //もし送られたデータがajaxだった場合
$this->autoRender = false; // 自動描画をさせない
$posts = $this->request->data; //ajaxで送られた中身を$postsに入れています
$temp = array(
'FromInput' => array(
'year' => $posts['year'],
'bbbb' => $posts['bbbb'],
'cccc' => $posts['cccc']
)
);
$this->FormInput->create();
$this->FormInput->save( $temp );//セーブします
exit; //処理を終わります
}//もし送られたデータがajaxだった場合
基本はCakePHPの入力アクションと変わらないですね。
以上、Ajaxを用いてCakePHPでフォーム入力をするための簡易的な方法でした。
以下、蛇足です。
submitボタンが押されているかを確認する方法
次のコードをクロームのコンソールに書く。
$(".submit input").on("click", function(e){
e.preventDefault();
console.log("クリックされました");
});
上記のコードをフォーム画面が出ているページで、
コンソール画面で実行する。
実行したら、実際にフォームに何かを送ってみる。
実際にFormでデータが送られているかを確認する方法
F12でデベロッパーツールを開き、「Network」を選択。
下に下るとデータの送信（POST）がされているはずなので、
そこをクリックして内容を確認。「Headers」の中のForm dataに、
送られるデータが入っているはず。
