fullcalendarを用いて入力された内容を保存機能

~~打ち消し線~~### 前提・実現したいこと
fullcalendarとMYSQLを使ってイベントの保存

ここに質問の内容を詳しく書いてください。
データベースで一人一人管理したカレンダー機能を作っています。その際に入力した内容を保存機能がわかりません

該当のソースコード

mypage.php

<?php session_start(); require_once '../classes/UserLogic.php'; require_once '../functions.php'; //ログインしているか判定し、していなければ新規登録画面へ返す $result = UserLogic::checkLogin(); if(!$result) { $_SESSION['login_err'] = 'ユーザを登録してログインしてください'; header('Location: signup_form.php'); return; } $login_user =$_SESSION['login_user']; if(isset($_POST['keep'])) { $keep = $_POST['keep']; echo $keep; } ?> <!DOCTYPE html> <html> <head> <meta charset='utf-8' />  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' /> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script> <style> /* bodyスタイル */ html, body { overflow: hidden; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } /* カレンダーのヘッダースタイル(年月がある部分) */ .fc-header-toolbar { padding-top: 1em; padding-left: 1em; padding-right: 1em; } </style> </head> <body style="padding:30px;">  <div id='calendar-container'> <div id='calendar'></div> </div> <script> (function(){ $(function(){ // calendarエレメント取得 var calendarEl = $('#calendar')[0]; // full-calendar生成する。 var calendar = new FullCalendar.Calendar(calendarEl, { height: '700px', // calendarの高さ設定 expandRows: true, // 画面に合わせて高さを再設 slotMinTime: '00:00', // Dayカレンダーに開始時間 slotMaxTime: '24:00', // Dayカレンダーに終了時間 // ヘッダーに表示するツールバー headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, initialView: 'dayGridMonth', // 初期ロードする時、見えるカレンダーの画面(基本設定:月) navLinks: true, // 日付を選択するとDayカレンダーやWeekカレンダーにリンク editable: true, // 修正可能 selectable: true, // カレンダーのドラッグ設定可能 nowIndicator: true, // 現在時間マーク dayMaxEvents: true, // イベントの数がオバーすると高さの制限(+のマークと何個式で表現) locale: 'ja', // 日本語設定 eventAdd: function(obj) { // イベントが追加すると発生するイベント console.log(obj); }, eventChange: function(obj) { // イベントが修正されたら発生するイベント console.log(obj); }, eventRemove: function(obj){ // イベントが削除すると発生するイベント console.log(obj); }, select: function(arg) { // カレンダーでドラックでイベントを生成することが可能。 var title = prompt('Event Title:'); if (title) { calendar.addEvent({ title: title, start: arg.start, end: arg.end, allDay: arg.allDay }) } calendar.unselect() } }); // カレンダーレンダリング calendar.render(); }); })(); </script> <form action="keep.php" method="POST"> <input type="submit" name="keep" value="保存"> </form>

<form action="logout.php" method="POST">

keep.php

<?php session_start(); require_once '../classes/UserLogic.php'; if(isset($_POST['mypage'])) { $keep = $_POST['mypage']; echo $mypage; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>保存画面</title> </head> <body> <h2>保存完了</h2> <p>保存しました！</p> <form action="mypage.php" method="POST"> <input type="submit" name="mypage" value="マイページへ"> </form> </body> </html> ### 試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

skys215

2021/11/21 08:11

eventAdd: function(obj) { // イベントが追加すると発生するイベント console.log(obj); }, ここでajaxを通じてphpにリクエストを送り、MySQLに保存すると思います。

hoge_1111

2021/11/24 05:54

できればコードを打っていただけるとありがたいです

hoge_1111

2021/11/25 04:36

phpのをmypage.phpに書くとエラーがでますどうすればよいですか

行動規範の内容に同意します

回答1件

javascript
1eventAdd: function(obj) { // イベントが追加すると発生するイベント
2  axios.post('/add', obj).then((res) => { alert('OK'); })
3},

php
1//...
2$data = [
3  'name' => $_POST['name'],
4  'start_at' => $_POST['start_at'],
5  //....他のプロパティ
6];
7$event = EventLogic::add($data);
8return json_encode($event, true);