ajaxのserialize()の中身が空になってしまう。

Question

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

laravelでajaxを用いてデータベースに保存させたいのですが、ajaxのserialize()の中身が空になってしまいます。

該当のソースコード

  $('.btn').on('click', (function(e) {
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });

      $.ajax({
              url: '/save',
              type: 'POST',
              data: $('.btn').serialize(),
              dataType: 'json',
          })
          .done(function(data) {
              alert(data);
          })
          .fail(function(data) {
              console.log(data)
          });
  }));

  <form method="POST" action="{{action('sampleController@save')}}">
    @csrf
    <div class="card">
      <button type="button" class="btn" value="1" name="test">
　　　//ボタンの中身
      </button>
    </div>


    <div class="card">
      <button type="button" class="btn" value="2" name="test">
      //ボタンの中身
      </button>
    </div>

    <div class="card">
      <button type="button" class="btn" value="3" name="test">
      //ボタンの中身
      </button>
    </div>
  </form>

補足情報

buttonのtypeをsubmitにすると保存できたのでcontrollerの記述は合っているかと思います。

Answer 1

要素に設定しているvalue属性を読むのであれば.val()でよいのでは？

$('.btn').val()

【.val() | jQuery API Documentation】
https://api.jquery.com/val/

【.serialize() | jQuery API Documentation】
https://api.jquery.com/serialize/

Comments

[yassan511]

返信ありがとうございます。
上記のコードに直してもsqlで値が無いとエラーが出ました。
そこでvar data = $('.btn').val();
　　console.log(data);
で見たところどのボタンを押しても１と表示されています。
そこに問題があるのでしょうか。

[kei344]

data: { 'test' : $( this ).val() }
で試してみてください。

[yassan511]

無事にできました。
ありがとうございました。

[kei344]

$input = $request->all();
で何が届いているか、何が届いていないかを確認してみては。（Ajaxのときと「typeをsubmit」の時の両方で）

【HTTPリクエスト 6.x Laravel】
https://readouble.com/laravel/6.x/ja/requests.html

[kei344]

コメントを編集（削除）しないでください。どういった問題があって、それをどう解決したかを提示してください。

[yassan511]

一度エラーが出ましたが下記の記述ミスが原因でした。
data: { 'test' : $( this ).val() }
こちらの記述で解決しました。

Answer 2

serializeはformに対して使うんだったと思います

Comments

[yassan511]

返信ありがとうございます。
そこに関しては勉強不足でした。
.val()に直しましたが、未だsqlで値が無いとエラーが出ている状態です。