在数据库中插入芯片并在 Laravel 8 和 Materialize CSS 中从数据库中显示它

Question

我想在数据库中一次插入多个芯片。

这是我的添加任务页面，有一个select字段。如果我 select 复选框，那么另一个字段是可见的。要输入筹码，我可以为一个 select 框输入多个筹码。如何将这些芯片输入数据库？

而且我还想以复选框的形式向用户展示这些筹码。如果我使用 select 框中的复选框并输入多个芯片，那么这些多个芯片将成为用户端的复选框。我该怎么做？

<div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
        <h4 class="card-title">Add Task</h4>
            <form class="forms-sample" action="{{ route('store.task', $checklist->id) }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="exampleInputUsername1">Task Name</label>
                    <input name="name" type="text" class="form-control" id="name" required>
                    <span id="task" class="text-danger"></span>
                    @error('name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="exampleTextarea1">Description</label>
                    <textarea name="description" class="form-control" name="summernote" id="summernote1" required></textarea>
                </div>
                @error('description')
                    <span class="text-danger">{{ $message }}</span>
                @enderror

                <div class="row">
                    <div class="col-md-6">
                        <select class="form-control" id="select" required>
                            <option disabled="" selected="">--Select Option--</option>
                            <option value="text">Text</option>
                            <option value="textarea">Text Area</option>
                            <option value="checkbox">Check Box</option>
                            <option value="radio">Radio</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <input name="name" type="text" class="form-control" id="name1" style="display: none">
                        <textarea name="description" class="form-control" id="textbox" style="display: none"></textarea>
                        <div class="chips" id="chips" style="display: none">
                            <input class="custom-class">
                        </div>
                        <div class="chips" id="chips1" style="display: none">
                            <input class="custom-class">
                        </div>
                    </div>
                </div>
                <button name="submit" type="submit" class="btn btn-primary mr-2">Add</button>
            </form>
        </div>
    </div>
</div>

我的任务 table 包含以下字段： id、name、description 和 checklist_id

我应该添加哪个字段以及如何将这些芯片插入数据库并以复选框的形式显示它们？

Answer 1

我设法将芯片数据存储在数据库中。我将数据传递给按钮“单击”事件上的隐藏 div，如下所示：

<script>
    $(document).ready(function(){

        $("#button").on("click", function() {

            var chips = M.Chips.getInstance($('.chips')).chipsData;
            var sendChips = JSON.stringify(chips);
            $('#chipss').val(sendChips);
        });
    });
</script>

而空的 div 是：

<input id="chipss" type="hidden" name="chip3">

为了将此数据传递到数据库：

Task::insert([
          'name' => $request->name,
          'description' => $request->description,
          'checklist_id' => $checklist_id,
          'options' => $request->select,
          'created_at' => Carbon::now(),
          'created_by' => session('firstname'),
          'value' => $request->chip3
      ]);

并且在您的任务模式中，您必须将其转换为数组：

protected $casts = [
    'value' => 'array'
];

而且你的值字段在你的数据库中必须是 json 一定要添加 json 类型的值字段。

为了显示这些数据，我想分享以下代码：

<div class="form-group">
    @foreach(json_decode($work->value,true) as $value)
    <div class="form-check form-check-primary">
        <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="value" value="1"> {{ $value['tag'] }} <i class="input-helper"></i></label>
    </div>
    @endforeach
</div>

这将只显示您插入的筹码数据。

在数据库中插入芯片并在 Laravel 8 和 Materialize CSS 中从数据库中显示它

Inserting a chip in a database and show it from the database in Laravel 8 and Materialize CSS

laravel

laravel-8

chips