使用 AJAX Jquery的Laravel Crud中的Submit按钮不起作用

nxagd54h  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(117)

我试图提交表格后,填写表单字段,但它没有得到提交,也没有得到任何类型的错误控制台以及网络。
My create.blade for form:

<form method="POST" class="create_form" id="form" action="{{ route('details.store') }}" enctype="multipart/form-data"> @csrf <tr>
    <td>Name</td>
    <td>
      <input type="text" name="name">
    </td>
  </tr>
  <tr>
    <td>Age</td>
    <td>
      <input type="text" name="age">
    </td>
  </tr>
  <tr>
    <td>Address</td>
    <td>
      <input type="text" name="address">
    </td>
  </tr>
  <tr>
    <td>Contact</td>
    <td>
      <input type="text" name="contact">
    </td>
  </tr>
  <tr>
    <td>Email</td>
    <td>
      <input type="text" name="email">
    </td>
  </tr>
  <tr>
    <td>Gender:</td>
    <td>
      <input type="radio" name="gender" value="Male" checked>Male
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="radio" name="gender" value="Female">Female
    </td>
  </tr>
  <tr>
    <td>Qualification </td>
    <td>
      <select name="qualification">
        <option value="SSC">SSC</option>
        <option value="HSC">HSC</option>
        <option value="UG">UG</option>
        <option value="PG">PG</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Hobbies:</td>
    <td>
      <input type="checkbox" name="hobbies[]" value="Trading">Trading
    </td>
  </tr>
  <td></td>
  <td>
    <input type="checkbox" name="hobbies[]" value="Games">Games
  </td>
  </tr>
  <td></td>
  <td>
    <input type="checkbox" name="hobbies[]" value="Music">Music
  </td>
  </tr>
  <td></td>
  <td>
    <input type="checkbox" name="hobbies[]" value="Swimming">Swimming
  </td>
  </tr>
  <tr>
    <td>Profile Picture</td>
    <td>
      <input type="file" name="profilepic">
    </td>
  </tr>
  <tr>
    <td>Signature</td>
    <td>
      <input type="file" name="signature">
    </td>
  </tr>
  <tr>
    <td>
      <button type="button" class="save_create">Save</button>
    </td>
    <td>
      <button type="button" class="back">Back</button>
    </td>
  </tr>
</form>

字符串
我 AJAX jquery代码提交按钮:

$(document).on('submit', '.create_form', function(event) {
    event.preventDefault();
    var data = $(this).serialize();
    $.ajax({
        url: "{{ route('details.store') }}",
        data: data,
        type: "POST",
        dataType: "json",
        success: function(response) {
            window.location.href = ("{{ route('details.index') }}");
        },
        error: function(error) {
            console.log("Errors :", error);
        }
    });
});


我还试图在控制台中获得结果和错误,但仍然没有得到任何结果。我也用了

<input type="submit" class=save_create>


但还是没有被提交

wf82jlnq

wf82jlnq1#

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

    class DetailController extends Controller
    {
        public function store(Request $request)
        {
            // Validate the incoming request data
            $validatedData = $request->validate([
                'name' => 'required|string',
                'age' => 'required|numeric',
                'address' => 'required|string',
                'contact' => 'required|string',
                'email' => 'required|email',
                'gender' => 'required|string',
                'qualification' => 'required|string',
                'hobbies' => 'nullable|array',
                'profilepic' => 'nullable|image',
                'signature' => 'nullable|image',
            ]);
    
            // Store the data in the database or perform any desired operations
            // Example: Creating a new details
            $details = Detail::create($validatedData);
    
            // Redirect to the details.index route
            return redirect()->route('details.index')->with('success', 'Detail added successfully!');
        }
    }

字符串
你需要像这样处理而不是 AJAX
如果你想要 AJAX ,那么就像这样使用

<script>
    $(document).ready(function() {
        $('#form').submit(function(event) {
            event.preventDefault(); // Prevent default form submission
            
            // Serialize the form data
            var formData = new FormData(this);
            
            $.ajax({
                url: "{{ route('details.store') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Redirect to details.index route on success
                    window.location.href = "{{ route('details.index') }}";
                },
                error: function(xhr, status, error) {
                    // Handle error if necessary
                }
            });
        });
    });
</script>
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class DetailsController extends Controller
{
    public function store(Request $request)
    {
        // Validate the incoming request data
        $validatedData = $request->validate([
            // Validation rules for your form fields
        ]);

        // Store the data in the database or perform any desired operations
        // Example: Creating a new user
        $user = User::create($validatedData);

        // Return a JSON response if needed
        return response()->json(['success' => true]);
    }
}

qkf9rpyu

qkf9rpyu2#

您可以在HTML中使用FormID和这个Form2文件add,这样就可以像这样使用form_data.append

<input id="save_apply_leave" name="submit" type="submit" class="btn btn-outline btn-info btn-lg" value="{{ __('Apply') }}"/>
    
<script>
 $(document.body).on('click','#save_apply_leave',function() {

 var front_passport = $("#front_passport").prop("files")[0];
           
            var form_data = new FormData();
            form_data.append("branch", branch);
            form_data.append("accomodation", accomodation);
            form_data.append("front_passport", front_passport);

                 $.ajax({
                    url: '{{ url('attendance/updateAttendanceApply') }}',
                    headers: {
                        'X-CSRF-TOKEN': 
                      $('meta[name="_token"]').attr('content')
                    },
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    dataType: 'json',
                    success: function (response) {
                   if (response.status == 1){
                   console.log("approve");
                  }

           });

      });
</script>

字符串

相关问题