laravelでトグルボタンを作りたい。

以下のようなトグルボタンを実装したい。

https://gyazo.com/eda3b55a7b980f8cedce35f1121ece92

index.blade.php
1
2<!DOCTYPE HTML>
3<html>
4<head>
5    <title>ToDoリスト</title>
6</head>
7<body>
8
9<h1>TODOリスト</h1>
10<br>
11<input type="radio">すべて
12<input type="radio">作業中
13<input type="radio">完了
14
15
16@isset($todos)
17@foreach ($todos as $todos)
18
19<table>
20 <tr>
21  <th>ID</th>
22  <th>コメント</th>
23  <th>状態</th>
24  </tr>
25  <tr>
26  <th>{{$loop->iteration}}</th>
27  <th>{{ $todos->id }}</th>
28  <th>{{ $todos->comment }}</th>
29
30
31  <th> <input type="submit" class="" value="作業中"></th>　//この部分
32
33
34  <th><form action="{{ route('todos.delete',[ 'id' => $todos->id ])}}" method="POST">
35    @csrf
36    @method("DELETE")
37    <button type="submit">削除</button>
38</form></th>
39  </tr>
40</table>
41
42@endforeach
43@endisset
44
45
46<h2>新規タスクの追加</h2>
47<form action="/todos" method="POST">
48    
49    <textarea name="comment" rows="1" cols="25"></textarea>
50    
51    {{ csrf_field() }}
52    <button class="btn"> 追加 </button>
53</form>
54
55</body>
56</html>

ループ変数を使うのかなと予想は立てつつも
実装方法が分かりません。

もし分かる方いらっしゃればよろしくお願い致します。

mikkame

2019/12/04 14:35

トグルボタンを作りたい　という意味ですか？

muumuuland

2019/12/05 12:25

mikkameさんご返信ありがとうございます。そうです。トグルボタンという語彙を知らずこのような質問になってしまいました。やりたい実装としましては、以下３点です。・状態ボタンが押下された際に、postメソッドでリクエストを送る。・その際に押下されたボタンのタスクID（DBに保管されている方）と変更後の状態をPOSTで受け渡す。・受け取った情報を元にコントーラーでDBのデータを更新する。もし分かりましたら教えていただけると幸いです。

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

回答1件

おそらく、Ajaxです。
ボタン押下でAjax通信でPHPへ
PHPで更新処理を行ってJavaScriptにバック
JavaScriptでボタン表記の切り替え

投稿2019/12/04 12:18

m.ts10806

総合スコア80850

muumuuland

2019/12/04 13:50

m.ts10806さんご回答ありがとうございます。できればlaravelの機能だけで実装したいのですが、やり方分かりますでしょうか、、、

m.ts10806

2019/12/04 13:58

Ajaxで受け取って処理する部分はPHPとなりますしLaravelで可能です。「画面遷移を伴わない」のであれば「だけ」ではできません。

muumuuland

2019/12/05 12:27

m.ts10806さんありがとうございます。今回はJSなどは使わずに実装したいので他のやり方も探してみます。ですが、ありがとうございます。勉強になりました！

m.ts10806

2019/12/05 12:52

むしろJavaScript使わずにという制限をするメリットがわかりかねます。画面はあくまでフロントエンドの仕事なので正確にはPHPの範疇ではありません。両者の利点を上手に使って実現する必要があります。どうしてもというのでしたらformでpostして状態更新し、最新情報を取得してblade側で出す情報を状態によって切り分けることは可能ですが、これはLaravelならではのような仕組みではなく通常PHPで組むときとロジックは同じです(Ajaxでも、ですが) しかし、なぜまたこんな無言低評価がつくか。

muumuuland

2019/12/09 12:21

私の質問が悪かったと思います。すいません。シンプルにトグルボタンを生成する場合は、分かりますでしょうか？

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