How to serialize form in ajax and save data in database with laravel?

Question

I have a form in which I user can insert multiple inputs fields and save to database using ajax Here are the inputs,

I'm trying to send a serialized form to my database. My question is that when I serialize the form, use JQuery to attach it to a hidden input field, and then send the the form and some other information to the database, the rest of the information is reaching the database but I still have a blank in where the serialized form is. If anyone could point out where I went wrong and/or explain how this should be done I'd be very grateful! Thank you very much!

blade

<form method="post" id="form-job-store">
    <input type="hidden" name="url" value="{{ route('job.store') }}">
    @csrf
    <div class="row">
        <div class="col-md-6 mb-3">
            <div class="col-md-6 mb-3">
                <label for="history">history</label>
                <input type="text" class="form-control" id="history" name="history">
            </div>
            <div class="col-md-6 mb-3">
                <label for="post_title">post_title</label>
                <input type="text" class="form-control" id="post_title" name="post_title">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <button type="submit" class="btn btn-success" id="btn-job-submit"><i class="fas fa-plus fa-xs"></i> Save</button>
        </div>
    </div>
<form>

script

$(document).ready(function () {
    $('#btn-job-submit').on('click', function (event) {
        event.preventDefault();
        var formData = new FormData($('#form-job-store')[0]);
        let url = $('#form-job-store :input')[0].getAttribute('value');
        $.ajax({
            type: 'POST',
            url,
            data:  $(formData).serialize(),
            success: function (data) {
                alert(data);
            },
        });
    });
});

web.php

Route::resource('job', 'JobController');

JobController.php

public function store(Request $request)
{
    $job = Job::create([
        'user_id' => auth()->id(),
        'post_title' => $request->post_title,
        'history' => $request->history,
    ]);
    return response()->json($job);
}

You dont need to serialise it, formdata (look it up) already did that — RiggsFolly
– RiggsFolly, Commented Jul 13, 2021 at 11:25
This code creates a new row in the table (database). But it does not fill the information. — user16277300
– user16277300, Commented Jul 13, 2021 at 11:34
Debug: Step1:: Did you try a dd($request); to see whats in the $request — RiggsFolly
– RiggsFolly, Commented Jul 13, 2021 at 11:37

A.A Noman · Accepted Answer · 2021-07-13 12:15:00Z

1

You have to use like this

$(document).ready(function(){
    $('#btn-job-submit').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url:'{{route('job.store')}}',
            method:"POST",
            data:new FormData(this),
            dataType:'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success:function(data){

            }
       })
   })
})

edited Jul 13, 2021 at 12:15

answered Jul 13, 2021 at 12:06

A.A Noman

5,2669 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to serialize form in ajax and save data in database with laravel?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related