Laravel 8 materialize css 芯片在数据库中存储芯片数据

Parth 发表于 Dev

领域

如何使用 Laravel 8 中的控制器将实体化 css 芯片从表单存储在数据库中？这里我使用了materialize芯片，如何获取这些芯片数据并将它们存储到数据库中？我想将此筹码数据与其他表单数据一起添加。

<form class="forms-sample" action="{{ route('store.task',$checklist->id) }}" method="POST" enctype="multipart/form-data">
            @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">
                        <label for="select">Select Option</label>
                        <select class="form-control" id="select" name="select">
                        <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">
                        
                        <div class="chips" id="chips" style="display: none">
                            <input class="custom-class" name="chip">
                        </div>

                        <div class="chips" id="chips1" style="display: none">
                            <input class="custom-class" name="chip1">
                        </div>
                    </div>

                    <input id="chipss" type="hidden" name="chips">
                
                </div>
                

                
                
                <button name="submit" type="submit" class="btn btn-primary mr-2" id="button">Add</button>
                
            </form>

领域

我们可以将这些实体化的 css 芯片数据以 json 格式存储在数据库中。首先，我们必须修改任务模态。

protected $casts = [
    'value' => 'array'
];
Add this casts to your task modal.Then you have to create a hidden div in your form.
<input id="chipss" type="hidden" name="chip3">

use this script to get data from your input chips
 <script>
  $(document).ready(function(){

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

var chips = M.Chips.getInstance($('.chips')).chipsData;
var sendChips = JSON.stringify(chips);
$('#chipss').val( sendChips );

});
});
</script>

then go to your task controller and send this data to database:
         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
        ]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。