laravel 8 ajax 如何提交模态表单到 controller

Question

我正在尝试将数据发送到 controller 以进行更新。 但是，我无法通过 Ajax 发送提交表单，我点击了提交按钮，即使我正确说明了一切，也没有任何反应。

这是我的观点：

<!-- Modal -->
                                            <div class="modal fade" id="edit-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">QRcode</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                
                                   <form action="" method="POST" id="updateEditForm" enctype="multipart/form-data">
                                                @csrf
                                                <input type="hidden" id="id" name="id" value="">
                                                                    <div class="form-group row">
                                                            <label for="facName" class="col-sm-2 col-form-label">Faculity Name</label>
                                                            <div class="col-sm-10">
                                                            <select id="faculity_name" name="faculity_name" class="form-control" vlaue="">
                                                            <option value="FKEKK">FKEKK</option>
                                                                <option value="FKE">FKE</option>
                                                                <option value="FKM">FKM</option>
                                                                <option value="FKP">FKP</option>
                                                                <option value="FTMK">FTMK</option>
                                                                <option value="FPTT">FPTT</option>
                                                                <option value="PPB">PPB</option>
                                                                <option value="IPTK">IPTK</option>
                                                            </select>
                                                            <span class="text-danger" id="fac-input-error"></span>
                                                            </div>
                                                        </div>
                                                        
                                                            <div class="form-group row">
                                                            <label for="docType" class="col-sm-2 col-form-label">Document Type</label>
                                                            <div class="col-sm-10">
                                                            <select id="document_type" name="document_type" class="form-control" vlaue="">
                                                            <option value="Past years exams">Past years exams</option>
                                                                <option value="Past years quizes">Past years quizes</option>
                                                                <option value="Past years assignments">Past years assignments</option>
                                                                <option value="Past years mini projects">Past years mini projects</option>
                                                                <option value="Past years final projects">Past years final projects</option>
                                                            </select>
                                                            <span class="text-danger" id="doc-input-error"></span>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group row">
                                                            <label for="uploadFile" class="col-sm-2 col-form-label">Upload File</label>
                                                            <div class="col-sm-10">
                                                            <input type="file" class="form-control-file" name="file" id="file">
                                                            <span class="text-danger" id="file-input-error"></span>
                                                            </div>
                                                        </div>

                                                        <div class="form-group row">
                                                            <label for="subName" class="col-sm-2 col-form-label">Subject Name</label>
                                                            <div class="col-sm-10">
                                                            <input type="text" class="form-control" id="subject_name" name="subject_name" vlaue="">
                                                            <span class="text-danger" id="sub-input-error"></span>
                                                            </div>
                                                        </div>

                                                        
                                                        
                                                        <div class="form-group row">
                                                            <label for="desc" class="col-sm-2 col-form-label">Description</label>
                                                            <div class="col-sm-10">
                                                            <textarea class="form-control" id="description" name="description" rows="3" vlaue=""></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="form-group row">
                                                            <div class="col-sm-10">
                                                            <button type="submit" id="btn-edit" class="btn btn-primary">Save</button>
                                                            </div>
                                                        </div>
                                                </form>
                                                
                               </div>
                                </div>
                            </div>
                        </div>

Ajax：

$(document).ready(function () {

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

$('#updateEditForm').submit(function(e) {
  e.preventDefault();

  var id = $("#id").val();
  let formData = new FormData($(this)[0]);

  var idd = $("#updateFiles input[name=id]").val()
   
  alert(idd)
   
    $.ajax({
      url: '/fileEdit/' + $id,
      type: "POST",
      data: {
        formData
      },
      contentType: false,
      processData: false,
      success: function (response) {
        
       
        alert(response.message);
          $('#edit-model').modal('hide');
      },
      error: function(response){
        console.log(response)
        
    }
  });
});


$('body').on('click', '#editFiles', function (event) {

    event.preventDefault();
    var id = $(this).data('id');
    $.get('file/' + id + '/edit', function (data) {
         $('#userCrudModal').html("Edit file");
         $('#btn-edit').val("Edit file");
         $('#edit-model').modal('show');
         $('#id').val(data.data.id);
         $('#faculity_name').val(data.data.faculity_name);
         $('#document_type').val(data.data.document_type);
         $('#file').val(data.data.file);
         $('#subject_name').val(data.data.subject_name);
         $('#description').val(data.data.description);
     })
});

}); 

路线：

Route::post('/fileEdit/{id}', [utemfilesharing::class, 'edit'])->name('file.edit');

Controller：

 public function edit(Request $req, $id)
{
    $validate = Validator::make($req->all(),[
        'faculity_name' => 'required',
        'document_type' => 'required',
        'subject_name' => 'required',
        'description' => 'required'
        ]);

    $fileId = File::find($id);
    if($fileId) {
        $fileId->faculity_name = $req->input("faculity_name");
        $fileId->document_type = $req->input("document_type");
        $fileId->subject_name = $req->input("subject_name");
        $fileId->description = $req->input("description");
        
        if($req->hasFile('file'))
        {
        $path = storage_path('app/public/uploads/'. $fileId->name);
        if(File::exists($path)){
            File::delete($path);
        }
        $file = $req->name('file');
        $extension = $file->getClientOriginalName();
        $filename = time().'_'.$extension;
        $file->move('app/public/uploads/', $fileName);
        $fileId->name = $filename;
        }
        $fileId->save();
        return response()->json(['success'=>200,
        'message'=>'File Updated Successfully']);
    }
    else{
        return response()->json(['success'=>200,
        'message'=>'ID Not Found']);
    }
        

}

请注意，数据包括文件，由于提交按钮不起作用，因此不确定此代码的错误在哪里。 任何帮助将不胜感激

Answer 1

家伙！

尝试这样做 $('#updateEditForm').submit(function(e) {

为了那个原因

$('#btn_edit').submit(function(e) {