LARAVEL

Bütün formu jQuery Ajax funksiyasında data olaraq göndərmək

12.08.2021 5 dəq oxuma

 1.html faylda

<form method="post" id="blogForm" action="{{ route('blog.store') }}" onsubmit="return false" enctype="multipart/form-data">
    @csrf
    <div class="form-group mb-5">
        <div class="form-group">
            <label for="photo" class="form-label">Banner (780x400 - optional)</label>
            <div class="col-sm-10">
                <div class="dropzone">
                    <img id="preview" src="{{ asset('assets/images/Add-photo-icon.png') }}" alt="Add photo icon"/>
                    <input type="file" name="photo" class="upload-input" id="photo" value="{{ old('photo') }}" aria-describedby="photoHelp"/>
                </div>
            </div>
            <small id="photo-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="kateqoriyas" class="col-sm-2 col-form-label">Kateqoriyalar</label>
        <div class="col-sm-10">
            <select name="kateqoriyas" id="kateqoriyas" class="form-control">
                <option value="">Birini seçin</option>
                @foreach($kateqoriyas as $kateqoriya)
                <option value="{{ $kateqoriya->id }}">{{ $kateqoriya->category_az }}</option>
                @endforeach
            </select>
            <small id="kateqoriyas-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="tags" class="col-sm-2 col-form-label">Taglar</label>
        <div class="col-sm-10">
            <select id="tags" name="tags[]" class="form-control" multiple="multiple">
                <option value="">Birini seçin</option>
                @foreach($tags as $tag)
                    <option value="{{ $tag->id }}">{{ $tag->tag_az }}</option>
                @endforeach
            </select>
            <small id="tags-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="title_az" class="col-sm-2 col-form-label">Title(AZ)</label>
        <div class="col-sm-10">
            <input type="text" name="title_az" id="title_az" value="{{ old('title_az') }}" class="form-control">
            <small id="title_az-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="title_en" class="col-sm-2 col-form-label">Title(EN)</label>
        <div class="col-sm-10">
            <input type="text" name="title_en" id="title_en" value="{{ old('title_en') }}" class="form-control">
            <small id="title_en-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="blog_az" class="col-sm-2 col-form-label">Blog(AZ)</label>
        <div class="col-sm-10">
            <textarea class="form-control" name="blog_az" id="blog_az" cols="30" rows="4">{{ old('blog_az') }}</textarea>
            <small id="blog_az-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="blog_en" class="col-sm-2 col-form-label">Blog(EN)</label>
        <div class="col-sm-10">
            <textarea class="form-control" name="blog_en" id="blog_en" cols="30" rows="4">{{ old('blog_en') }}</textarea>
            <small id="blog_en-error" class="form-text text-danger"></small>
        </div>
    </div>

    <div class="form-footer">
        <button type="submit" id="addBlog" class="btn btn-primary float-end">Əlavə et</button>
    </div>
</form>

2.js faylda

$(document).ready(function () {
    $('#addBlog').click(function () {
        $(this).prop('disabled',true);
        var blogForm = document.getElementById("blogForm");
        var data = new FormData(blogForm);
        data.append('blog_az', CKEDITOR.instances['blog_az'].getData());
        data.append('blog_en', CKEDITOR.instances['blog_en'].getData());
        $.ajax({
            url: '{!! route('blog.store') !!}',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function () {
                toastr.success('Blog saved successfully');
                setTimeout(function () {
                    location.href = '{!! route('blog.index') !!}'
                },3000);
            },
            error : function (myErrors) {
                $.each(myErrors.responseJSON.errors, function (key, value) {
                    $('#' +key+ '-error').html('').html(value);
                });
                $('#addBlog').prop('disabled',false);
            }
        });
    });
});

3.php faylda

public function index(Request $request)
{
    if($request->ajax())
    {
        $data = Blog::latest()
            ->get();

        return DataTables::of($data)

            ->editColumn('photo', function ($row) {
                return '<img style="width:50px;height:50px" src="'.config('app.url').'storage/blog-covers/'.$row->photo.'" alt="'.$row->title_en.'" />';
            })

            ->addColumn('status',function ($row){
                return $row->show != 1 ? '<span style="cursor: pointer" class="badge bg-danger">gizlidir</span>' : '<span style="cursor: pointer" class="badge bg-success">görünür</span>';
            })

            ->addColumn('action',function ($row){
                return '
                <div class="btn-list flex-nowrap">
                    <a href="javascript:void(0)" class="btn btn-danger MehsulDeleter" data-id="'.$row->id.'" data-bs-toggle="modal" data-bs-target="#modal-danger">
                      <i class="fa fa-times"></i>
                    </a>
                    <a class="btn btn-info myIdeaEditor"
                    href="'.route('blog.edit',[$row->id]).'"><i class="fa fa-edit"></i></a>
                </div>
                ';
            })

            ->rawColumns(['photo','action','status'])

            ->make(true);
    }

    return view('Admin.Pages.all-blogs');
}

 

Digər dildə: EN