Submit button not working in Laravel Crud using Ajax Jquery

PranavSompura
July 13, 2023
169 views
0 votes
2 Answers

I am trying to submit the form after filling out the form fields but it is not getting submitted and also not getting any kind of errors on console as well as network.

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>

My ajax jquery code for submit button:

 $(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);
                    }
                });
            });

I also tried to get the result and error in the console but still getting none of them.
Also I used

<input type="submit" class=save_create>

but still not getting submitted.

Answers

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

    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!');
        }
    }

you need to handle like this Instead of AJAX

if you want ajax then use like this

<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 AppHttpControllers;

use IlluminateHttpRequest;

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]);
    }
}

You can use in html form id and this form 2 file add so you can use form_data.append like that

 <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>

Please signup or login to give your own answer.

Click here to cancel reply.