Auto update Slug field value based on specific function in Laravel

Question

I'm building a blog system using Laravel 6, I 'v a function to generate a unique Slug.

What I want to do is a field in create post form, this field will be updated automatically while I type on the title field.

I want to generate the Slug field value from the Slug Function while typing on title field.

So is there any way to do this using jQuery or something else?

Slug Function

public function slug($string, $separator = '-') {
    if (is_null($string)) {
        return "";
    }

    $string = trim($string);

    $string = mb_strtolower($string, "UTF-8");

    $string = preg_replace("/[^a-z0-9_\sءاأإآؤئبتثجحخدذرزسشصضطظعغفقكلمنهويةى]#u/", "", $string);

    $string = preg_replace("/[\s-]+/", " ", $string);

    $string = preg_replace("/[\s_]/", $separator, $string);

    return $string;
}

Store Method

public function store(Request $request)
{
    $this->validate($request, array(
        'title'         => 'required|max:255',
        'body'          => 'required',
    ));
    $post = new Post;
    $post->title = $request->input('title');
    $post->body = $request->input('body');

    $post->save();

    return redirect('admin/posts')->with('success', 'post is successfully saved');
}

View

    <form action="{{ route('posts.store') }}" method="post">
    @csrf
    <div class="row gutters-tiny">
                    <div class="col-md-7">
                            <div class="block block-rounded block-themed">
                                <div class="block-header bg-gd-primary">
                                    <div class="block-options">
                                        <button type="submit" class="btn btn-sm btn-alt-primary">
                                            <i class="fa fa-save mr-5"></i> Save
                                        </button>
                                    </div>
                                </div>
                                <div class="block-content block-content-full">
                                    <div class="form-group row">
                                        <label class="col-12" for="ecom-product-name">Title</label>
                                        <div class="col-12">
                                            <input type="text" class="form-control" id="title" name="title"  value="">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-12">Body</label>
                                        <div class="col-12">
                                            <textarea class="form-control" id="body" name="body" rows="8"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </div>
                    </form>

Answer 1

You'v to change this two function in your code i try this code in laravel project.

Slug Function:

public function slug($string, $separator = '-') {
    if (is_null($string)) {
        return "";
    }

    $string = trim($string);

    $string = mb_strtolower($string, "UTF-8");

    $string = preg_replace("/[^a-z0-9_\sءاأإآؤئبتثجحخدذرزسشصضطظعغفقكلمنهويةى]#u/", "", $string);

    $string = preg_replace("/[\s-]+/", " ", $string);

    $string = preg_replace("/[\s_]/", $separator, $string);

    return slug_str($string).'-'.rand(0,9);
}

Store Method:

public function store(Request $request)
{
    $this->validate($request, array(
        'title'         => 'required|max:255',
        'body'          => 'required',
    ));
    $post = new Post;
    $post->title = $request->input('title');
    $post->body = $request->input('body');
    $post->slug = slug($request->input('title'));
    $post->save();
    return redirect('admin/posts')->with('success', 'post is successfully saved');
}

Reference url: click hear