質問: ### 実現したいこと phpとjavascriptでやりたいことがあるのですが勉強不足でどうしたらいいかわかりません。 具体的にはシフト表を作るシステムに携わっているのですがまず、 1シフト作成画面 左上のボタンをクリックすると勤務時間レパートリー登録画面へ行きます。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/57559f5c30cc0e1207dc622c0ed7b7df.png) 2勤務時間レパートリー画面 ここで時間を入力し登録するとDBテーブル(time_repertory)に格納&シフト作成画面へリダイレクト ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/faf54a9c11f315843bb843521e0100cc.png) 3シフト割り当て画面 シフトを割り当てたい人の1日のセルをクリックするとモーダルウィンドウが開き登録された**勤務時間レパートリー(A~:~,B~:~,C~:~)の3つのどれかをチェックで選択し追加を押すとDBテーブル(emp_shift)に保存され、データが入ってる日にちをクリックすると入れたABCのどれかにチェックは維持されたままで、違うレパートリーにチェックを入れ再び追加を押すとさっき登録したデータは削除し最新のデータを追加するようにしたいのです。そしてA,B,Cのデータが入っている日のセルにはそれぞれA,B,Cと表示させたいんです。** ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/0b06fd8bee1eef7abc3b955cf0149470.png) ちなみに現在はモーダルウィンドウを開くとこまでできています。アドバイスや参考ソースの提示どうぞよろしくお願いします。 ### システム概要 システム名:アルバイト・パート用シフト表作成 まずこのシステムを使う立場は管理者・従業員の二つに分けられます まずは会社側が管理者を作成しログイン→管理者のみ従業員を作成→シフト作成ページ(work_main.php)へ行くと作成された従業員を下にシフト作成していくシステムです。
回答: ざっくりしか仕様把握していませんが、こんな感じではないでしょうか。 ※ソースコードの提示は難しい内容なので、考え方のみです。 1. [PHP]→[HTML]DBから時間区分を取得し、「勤務時間レパートリー」の入力コントロールをモーダルに設置する 2. [javascript]→[HTML]クリックで登録モーダルを表示、日付・ユーザを引数として渡す 3. javascript]→[PHP]ajaxで日付、ユーザ(管理はIDとかでしょうか)、勤務時間レパートリーを送信。DBに登録する→[jQueryのAjaxをPHPで使うやつ 4. [PHP]→[javascript]→[php]→[HTML]更新成功したら画面リロード。シフト登録した日付のユーザには何かしらマークを置いておく 5. [javascript]→[HTML]マークをクリックで登録時と同じモーダルを表示、日付・ユーザと共に「勤務時間レパートリー」も引数として渡す ※不安であればクリック時にajaxで情報を再取得しても良いです 6. [javascript]→[HTML]渡された「勤務時間レパートリー」を初期状態チェックにしておく 7. [javascript]→[PHP]「更新」ボタンとし、ajaxにて更新処理を行う(以下2.と同) 「チェック」とありますが、1個しか選択できないのであれば、ラジオボタンかセレクトボックスですよね? 初期値設定のやり方は下記を参考にしてください。 * フォーム要素に対して値を設定するには?(val) ajax送信について =========== ajaxで送信するデータは配列形式です。 ``` var arg = {emp_id : $('#emp_id').val(),emp_name : $('#emp_name').val(),month : $('#month').val(),day : $('#day').val(),work_time:$("input[name='time_repertory']:checked").val()}; $.ajax({ type: "POST", url: "add.php", data: arg, ``` ``` $_POST["emp_id"]; ``` 「OK」「NG」だけであれば、1,0だけをphp側で最後にecho して終わりです。 そこで出力された内容が dataに格納されます。