【JavaScript】Fetch APIを使用してFormDataを送信する方法

<div>
  <input type="hidden" value="34" id="layoutId">
  <textarea name="css_value" id="layoutCss"></textarea>
</div>
<div>
  <button id="saveCssValue">CSSの変更を保存</button>
</div>

$('#saveCssValue').on('click', function() {
　　// ID値の取得
　　const layoutId = $('#layoutId').val();
   // エディタに入力されているCSSの取得
　　const cssValue = $('#layoutCss').val();
   // 取得したデータをFormDataの作成処理に渡す
　　create_form_data(layoutId, cssValue);
});

function create_form_data(layoutId, cssValue) {
　　// FormDataオブジェクトの定義
　　const formData = new FormData();
　　// FormDataに値を追加
　　formData.append('id', layoutId);
　　formData.append('css_value', cssValue);
   // CSS値をサーバーサイドに送信する処理へ
　　save_css_value(formData);
}

function save_css_value(formData) {
   // 送信されるFormDataの中身を出力
　　console.log([...formData.entries()]);
　　// コントローラーにデータを送信
　　fetch('../editLayout/save_layout_css', {
　　　　method: 'POST',
　　　　body: formData
　　})
　　// 処理結果(レスポンス)の取得
　　.then((res) => res.text())
　　// 結果の表示
　　.then((text) => {
　　　　alert('CSSの保存に成功しました');
　　})
　　// エラー処理
　　.catch((error) => {
　　　　console.log(error);
　　})
}

// レイアウトtemplateの保存処理
public function save_layout_css()
{
  // viewのRender機能を無効化する
  $this->autoRender = false;
  // 送信先のメソッドを判定
  if($this->request->is('post')) {
    // 送信されたCSSのデータを変数に格納する
    $data = $this->request->data;
    $id = $data['id'];
    $css = $data['css_value']
    // データの保存処理をコントローラーに渡す
    $save = $this->editLayout->saveLayoutCss($id, $css);
    // モデルでの処理が正常に行われた場合にレスポンステキストを返す
    if(!$save == true) return false;
       return 'テンプレートを保存しました。';
    }
}