非同期でサーバーに送ったフォームの値が取得できない

Question

実現したいこと

非同期で送信した値をLaravel側で取得できるようにしたい。

前提

作成中のアプリケーションに検索機能を実装しようとしています。
ユーザーがinput要素に入力した値をフォームで送信し、Laravel側で取得したいのですが、うまくいきません。

発生している問題・エラーメッセージ

input要素のname属性がadminlteSearchのため、コントローラで$searchTerm = $request->input('adminlteSearch');としようとしましたが、結果はnullでした。

該当のソースコード

<!-- 借り物のレイアウトになりますので、表示されているHTML構造を抜き出してきました -->
<form class="form-inline" action="#" method="get">
  <input type="hidden" name="_token" value="***************************">
  <div class="input-group">
    <input class="form-control form-control-navbar" type="search"
      name="adminlteSearch" placeholder="タスク検索" aria-label="タスク検索">
    <div class="input-group-append">
      <button class="btn btn-navbar" type="submit">
        <i class="fas fa-search"></i>
      </button>
      <button class="btn btn-navbar" type="button" data-widget="navbar-search">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
</form>

searchButton.addEventListener('click', (e) => {
  e.preventDefault();
  const form = searchButton.parentElement.parentElement.parentElement;
  const formData = new FormData(form);
  const XHR = new XMLHttpRequest();
  XHR.open("GET", '/task/search', true);
  XHR.responseType = "json";
  XHR.send(formData);
  XHR.onload = () => {
    // レスポンス後の処理
  };
});

public function searchTasks(Request $request)
{
    $searchTerm = $request->input('adminlteSearch');
    // ↑この値がnull
    // 処理を記述
    return response()->json($response);
}

試したこと

いろいろ試した結果、現在わかっていることは、次の3つです。
①JavaScriptのイベントは正常に発火している
②Laravelの指定したアクション(searchTasks)は動いている
③上記アクション内で$searchTermの値がnull

次のように、直接formDataを突っ込んでもダメでした。

…
// 変更前
const formData = new FormData(form);
// 変更後
const formData = new FormData(form);
const searchTerm = document.querySelector('input[name="adminlteSearch"]').value;
formData.append('adminlteSearch', searchTerm);
…

また、こちらを参照し、送信先URLを変更してみましたが、HTTPステータス404で戻ってきてしまい、どのように値を取得すれば良いのかわからない状況です。

…
// 変更前
XHR.open("GET", '/task/search', true);
// 変更後
const searchTerm = document.querySelector('input[name="adminlteSearch"]').value;
XHR.open("GET", '/task/search?keyword='+searchTerm, true);
…

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

PHP: 8.2.1
Laravel: 9.50.2

Comments

[退会済みユーザー]

「試したこと」の ① ～ ③ から想像するに、クライアントからは何らかが送信されサーバーは受け取ってはいるが、受け取ったものがサーバーの期待する形になってないということですよね。

Fiddler などのチャプチャツールを使ってそこがどうなっているか調べてはいかがです？

[taroyama_taro]

返信遅くなり申し訳ありません。ご回答ありがとうございます！
お教えいただいたFiddlerでリクエストの内容を確認したところ、フォームデータ自体が送られていなかったことがわかりました。原因はわからずですが、結果的に意図した挙動を適えることができましたので、折を見て自己解決とさせていただこうと思います。

[退会済みユーザー]

> 原因はわからずですが、

原因はコードにある searchButton が何なのか、それで正しいのかあたりにあるのではないですか。サーバーが正しく受け取ることができるには何をどういう形で送信すればいいのかを明らかにしてもらえれば、クライアント側をどうすればいいかはわかる人は多いでしょうから回答は出てくると思いますよ。

[taroyama_taro]

アドバイスありがとうございます。お出しすべき情報が欠けてしまっているために回答が集まらないということでしょうか。

searchButtonはフォームの中にあるtype="submit"のbutton要素(formを送信するボタン)を次のように取得したものになります。
const searchButton = document.querySelectorAll('button[class="btn btn-navbar"]')[0];
コンソールから同様に要素を取得してsearchButton.click();した際のレスポンスと、画面上のformを送信するボタンをクリックした際のレスポンスが一致していましたので、イベントをセットする要素は問題ないのではないかと推測しました。
同期通信にてリクエストとして送られているparamsは、
{_token=トークン, adminlteSearch=input要素の値}
となっており、これと同じ構造をajaxで送るために、
const form = searchButton.parentElement.parentElement.parentElement;
としてフォーム要素を取得(コンソール上では正しく取得できていることを確認しました)したのですが、うまくいきませんでした。

デフォルトの(イベントをセットしていない状態の)挙動としては、上記paramsが送信され、同じページを再度読み込んでいますが、form要素のaction属性が"#"となっていることから、本来同期通信は行われないはずなので、レイアウトテンプレートに使用したライブラリ側で別イベントがセットされており、それが動いているのだと推測しました。しかし一方で、e.preventDefault();でリクエストの送信が止められるということは、この推測と矛盾するようにも思います。
ほしい情報(ここではinput要素の値)をサーバーサイドで扱えるようにしたいということを考えた時、URLに乗せるという方法もあることがわかりましたので、今回はこちらで対応しました。

[退会済みユーザー]

> URLに乗せるという方法もあることがわかりましたので、今回はこちらで対応しました。

それれこのスレッドの課題を解決できたのであれば、どのようにしたのかを回答欄に書いて、その回答にマークをつけて、このスレッドはクローズしてください。

Answer 1

フォームの値をリクエストに乗せることができなかったために、サーバーサイドで扱えなかったようです。なぜフォームの値をリクエストに乗せることができなかったのかまではわかりませんでしたが、下記の方法で解決しました。

// 変更前
searchButton.addEventListener('click', (e) => {
  e.preventDefault();
  const form = searchButton.parentElement.parentElement.parentElement;
  const formData = new FormData(form);
  const XHR = new XMLHttpRequest();
  XHR.open("GET", '/task/search', true);
  XHR.responseType = "json";
  XHR.send(formData);
  XHR.onload = () => {
    // レスポンス後の処理
  };
});
// 変更後
searchButton.addEventListener('click', (e) => {
  e.preventDefault();
  const searchTerm = document.querySelector('input[name="adminlteSearch"]').value;
  const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  const url = `/tasks/search?_token=${token}&adminlteSearch=${searchTerm}`;

  const XHR = new XMLHttpRequest();
  XHR.open("GET", url, true);
  XHR.responseType = "json";
  XHR.send(null);
  XHR.onload = () => {
    // レスポンス後の処理
  };
});

送りたい値を(送りたいURL)?(値のキー名)=(値)としてURLに加えることで、サーバーサイドから

$request->input('(キー名)');

取得することができることがわかりました。