Can't auto-generate slug realtime in Laravel 5.4

Question

I want to auto-generate slug when user input the title.

<div class="form-group">
    <label for="name">Title of News</label>
    <input type="text" class="form-control" id="name" name="name"
            placeholder="Enter your title of news"
            value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>

<div class="form-group">
    <label for="slug">Slug</label>
    <input type="text" class="form-control" id="slug" name="slug"
        placeholder="slug"
        {{!! isFieldSlugAutoGenerator($dataType, $dataTypeContent, "slug") !!}}
        value="@if(isset($news->name)){{ str_slug($news->name, '-') }}@endif">
</div>

<script>
    $('document').ready(function () {

        $('#slug').slugify();
    });
</script>

Problem is:

It does not change real time when I enter text in Title of news.
Because it does not change real time, it doesn't save slug correctly.

Example:

When I input in fields Title of news: Apple iPhone 7 -> click button Save. The fields slug not contain any values.

Next, I change Title of news to Apple have plan release IOS 11 -> click button Save. The fields slug in database change to Apple iPhone 7.

You can see at gif:

http://i.imgur.com/JD0TbG8.gif

This is because you're not listening to change on your title input. So the slug is initialized with the old title and will not change. But I do not understand why are you using an input for slug. If you're saving the slug in the DB, then why the value of the slug input is ```@if(isset($news->name)){{ str_slug($news->name, '-') }}@endif``` and not ```$news->slug``` ? — Treast, Jul 22 '17 at 06:07
Ok, just tell me if you want to have the possibility to change the slug manually ? — Treast, Jul 22 '17 at 07:14

score 2 · Accepted Answer · answered Jul 22 '17 at 09:11

Your controller :

function store(Request $request) {
  $this->validate($request, [
    'title' => 'required'
  ]);

  $news = News::create($request->all());
  $news->slug = str_slug($request->title, '-');
  $news->save();

  return redirect()->back();
}

Your view :

<div class="form-group">
  <label for="name">Title of News</label>
  <input type="text" class="form-control" id="name" name="name"
  placeholder="Enter your title of news"
  value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>
<p>The slug will be <span id="slug"></span></p>

<script>
  $('document').ready(function () {

    $(document).on('change', 'input#name', function() {
      var slug = slugify($(this).val());
      $('span#slug').text(slug);
    });

  });

  function slugify(text)
  {
    return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
  }
</script>

I didn't try it, but should work. You probably need to adapt to your system, but the idea is here.

Hi @Treast, Can you make a version to user can edit `slug`? – Ave Jul 23 '17 at 20:28 — Ave, Jul 23 '17 at 20:28

Can't auto-generate slug realtime in Laravel 5.4

1 Answers1