CakePHP + AjaxでWebアプリを開発しています。

質問

CakePHP + AjaxでWebアプリを開発しています。

ある登録画面にて、ひとつの入力項目がセレクトボックスになっています。セレクトボックスの中身はマスターテーブルから取得。通常はその中から選択してもらうのですが、欲しい選択肢が無い場合は、その場でマスターに追加登録できるようにしたいと思っています。

追加登録用のテキストボックスを用意し、$ajax->formで送信して、セレクトボックスの中身を最新の状態にすることはできたのですが、このテキストボックスが属すフォームはこの登録画面全体の
フォームの中に入れられない（ネストできない）ので、テキストボックスとセレクトボックスを並べて表示することができません。このような場合は、スタイルシートで何とかするべきなのでしょうか？スマートな方法が見つからず、困っています。

また上とは別の方法も検討しています。というのは、テキストボックス自体が通常の登録作業には不要なので、常時表示している必要がありません。ですので、window.promptのプロンプトで追加したい文字列を受け取り、$ajax->observeForm内のhidden項目に値をセットするようにしたのですが、変更を認識してくれないようで、イベントが発生せず、submitされません。hiddenに値をセットした後、無理矢理フォームをsubmitさせると、画面自体が遷移してしまいます。試しに、hiddenをテキストボックスにして、直接入力すると、ロストフォーカス時にイベントが発生します。hidden項目のchangeイベントを無理矢理発生させるか、画面遷移をさせずにsubmitする方法はないものでしょうか？

以上、何か良い方法を御存知でしたらご教示いただけないでしょうか。よろしくお願いいたします。

回答No.1

yyr446

「このテキストボックスが属すフォームはこの登録画面全体の
フォームの中に入れられない（ネストできない）」

と、ありますが、そのテキストボックスを別フォームにする必要は
ないと思うんですが、AJAXしているという事はJavascript使用を
前提で作ってるんですよね、それなら
<form>

<select></select>

追加項目<input type="text" id='addOpt'>
<input type="button" onclick="OptionAdd();"　value="オプションを追加">

<input type="submit" value="送信">
</form>

として、
function OptionAdd(){
var addOpt=encodeURIComponent(document.getElementById("addOpt").value);

//Ajax処理で、addOptのみ送信してセレクトボックスの中身を最新の状態にする

}

とすればどうでしょう。

最初から、追加項目のテキストボックスと追加ボタンを見せるのがいやなら、
CSSで、そこを非表示{display:none}にしておいて、別のボタンのクリックか
最初のオプションの一番下にでも<option value="add">追加</option>を入れ
といてaddが選ばれたら、追加項目のテキストボックスと追加ボタンを表示す
る仕組みをjavascriptで書くとか

お礼

お礼が遅くなって申し訳ございません。いろいろと方法を検討した結果、ModalBoxというAjaxの仕組みを使って、解決することができました。