我的弹出窗口 window 中的表单无法提交 Laravel 中插入的数据

Question

我正在尝试使用弹出式表单提交数据，但我的提交按钮只是关闭 windows 而不是将所有数据保存到我的数据库中。

一切似乎都井井有条，但我的印象是表单无法读取我的控制器中包含的代码行

这是我的代码

    <div class="modal" id="exampleModalLong" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><b>ADD A NEW CLIENT</b></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('finance.store') }}" method="post" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <label>Select an existing user from the database. </label>
                        <div class="row">
                            <div class="form-group col-xs-5">
                                <select id="Clients" class="choices form-select" title="Selectionner"
                                        name="user_id">
                                    <optgroup label="{{ count($Users) }} clients retrouvés">
                                        <option value="" disabled selected>-- choisir --</option>
                                        @foreach($Users as $User)
                                            <option value="{{ $User->id }}">{{ $User->fullname }}</option>
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>
                            <label>Profession</label>
                            <div class="form-group">
                                <select class="choices form-select" title="Selectionner"
                                        name="profession_id">
                                    <option value="" disabled selected>-- choisir --</option>
                                    @foreach($Professions as $Profession)
                                        <option value="{{ $Profession->id }}">{{ $Profession->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <label>Phone</label>
                            <div class="form-group">
                                <input type="text" name="phone" placeholder="+243 " class="form-control">
                            </div>
                            <label>NID Type</label>
                            <div class="form-group">
                                <input type="text" name="nid_type" class="form-control">
                            </div>
                            <label>NID Photocopy</label>
                            <div class="row">
                                <div class="col-lg-2 col-xs-2">
                                    <div class="form-group">
                                        <img id="outputs" style="width:45px;background-color: whitesmoke;
                                        border:1px solid #bbb;height:45px;border-radius: 2px" >
                                    </div>
                                </div>
                                <div class="col-lg-10 col-xs-10">
                                    <div class="form-group">
                                        <div class="form-file">
                                            <script type="text/javascript">
                                                function previewImg(event) {
                                                    var outputs = document.getElementById('outputs');
                                                    outputs.src = URL.createObjectURL(event.target.files[0]);
                                                }
                                            </script>
                                            <input type="file" name="nid_photocopie" accept=".png, .jpeg, .jpg"
                                                   class="form-control" id="clientImges"
                                                   onchange="return previewImg(event)">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <label>Profile Image</label>
                            <hr>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <img id="output" style="width:50px;height:50px;border-radius: 50px " >
                                    </div>
                                </div>
                                <div class="col-md-10">
                                    <div class="form-group">
                                        <div class="form-file">
                                            <script type="text/javascript">
                                                function previewImage(event) {
                                                    var output = document.getElementById('output');
                                                    output.src = URL.createObjectURL(event.target.files[0]);
                                                }
                                            </script>
                                            <input type="file" name="image" accept=".png, .jpeg, .jpg"
                                                   class="form-file-input" id="clientImgz"
                                                   onchange="return previewImage(event)">
                                            <label class="form-file-label" for="clientImgz">
                                                <span class="form-file-text">Choose image...</span>
                                                <span class="form-file-button "><i data-feather="upload"></i></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light-secondary" data-dismiss="modal">
                                    <i class="bx bx-x d-block d-sm-none"></i>
                                    <span class="d-none d-sm-block">Close</span>
                                </button>

                                <button type="submit" class="btn btn-outline-secondary ml-1" >
                                    <i class="bx bx-check d-block d-sm-none"></i>
                                    <span class="d-none d-sm-block">Submit</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

这是我的控制器

public function storeProfile(Request $request)
    {
    $this->validate($request, [
    'user_id' => 'required',
    'profession_id'=> 'required',
    'nid_type'=> 'required',
    'nid_photocopie'=> 'required',
    ]);

    $slug = str_slug($request['fullname']);
    $image = $request->file('image');
    $image3 = $request->file('nid_photocopie');

    //INSERTS PROFILE IMAGE
    if (isset($image))
    {
    $image = $request->file('image');
    $currentData = Carbon::now()->toDateString();
    $fileToStore = $slug .'-'. $currentData .'-'. uniqid() .'.'. $image->getClientOriginalExtension();
    if(!file_exists('uploads/MicroCredit/ClientImage'))
    {
    mkdir('uploads/ClientImage', 0777 , true);
    }
    $image->move('uploads/ClientImage',$fileToStore);

    }
    else {
    $fileToStore = 'default.png';
    }

    //INSERT ID PHOTOCOPIE
    if (isset($image3))
    {
    $image3 = $request->file('nid_photocopie');
    $currentData = Carbon::now()->toDateString();
    $IdToStore = $slug .'-'. $currentData .'-'. uniqid() .'.'. $image3->getClientOriginalExtension();
    if(!file_exists('uploads/MicroCredit/IDs'))
    {
    mkdir('uploads/IDs', 0777 , true);
    }
    $image3->move('uploads/IDs',$IdToStore);
    }
    else {
    $IdToStore = 'default.png';
    }

    $CredNew = new Client();
    $CredNew->user_id = $request->user_id;
    $CredNew->profession_id = $request->profession_id;
    $CredNew->nid_type = $request->nid_type;
    $CredNew->nid_photocopie = $IdToStore;
    $CredNew->image = $fileToStore;
    $CredNew->slug = $slug;
    $CredNew->save();

    return redirect(route('/bienvenue'));
    }

这是我的路线

    //  ========= FINANCE - CLIENTS ======== //
    Route::get('/finance/creditor', [FinanceController::class,'indexCreditor'])
        ->name('finance.creditor');
    Route::post('/finance/store', [FinanceController::class,'store'])
        ->name('finance.store');
    Route::post('/finance/{id}/update', [FinanceController::class,'update'])
        ->name('finance.update');
    Route::delete('/finance/{id}/destroy', [FinanceController::class,'destroy'])
        ->name('finance.destroy');

这是我的模型

public function storeProfile(Request $request)
    <?php

    namespace App\Models;

    use Illuminate\Database\Eloquent\Factories\HasFactory;
    use Illuminate\Database\Eloquent\Model;

    class Client extends Model
    {
        use HasFactory;
        protected $with = ['Userz'];

        protected $fillable = [
            'user_id',
            'profession_id',
            'nid_type',
            'nid_photocopie',
            'image',
            'slug'
        ];

        public function profesn()
        {
            return $this->belongsTo(Profession::class,'profession_id');
        }

        public function Userz()
        {
            return $this->belongsTo(User::class,'user_id');
        }

        public function getRouteKeyName()
        {
            return 'slug';
        }
    }

这是我的迁移

class CreateCreditorsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('clients', function (Blueprint $table) {
            $table->id();
            $table->integer('user_id');
            $table->integer('profession_id');
            $table->string('nid_type');
            $table->string('nid_photocopie');
            $table->string('image')->nullable();
            $table->string('slug')->nullable();
            $table->timestamps();
        });
    }

Answer 1

通过使用 dd()，我能够看到哪个输入字段导致弹出模式不提交数据。感谢所有伸出援手的人！

dd($CredNew);

我的弹出窗口 window 中的表单无法提交 Laravel 中插入的数据

The form in my pop-pup window fails to submit the inserted data in Laravel

html

laravel

forms

magnific-popup