<form>
  <div class="form-group">
      <label for="title">Title</label>
    <!-- auto initialize via data-slugger -->
        <input id="title" type="text" class="form-control" name="title" data-slugger>
    </div>
    <div class="form-group">
      <label for="slug">Slug</label>
    <!-- jQuery Slugger, by default, will target all `[name=slug]` -->
        <input id="slug" type="text" class="form-control" name="slug">
    </div>
</form>
...
<!-- jQuery is, of course, a dependency -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Our main man here -->
<script src="jquery-slugger/dist/jquery.slugger.min.js"></script>

<form>
  <div class="form-group">
      <label for="title">Title</label>
    <!-- auto initialize via data-slugger -->
        <input id="title" type="text" class="form-control" name="title" data-slugger=".to-slugify">
    </div>
    <div class="form-group">
      <label for="slug">Slug</label>
        <input id="slug" type="text" class="form-control to-slugify" name="slug">
    </div>
  <div class="form-group">
      <label for="url">URL</label>
        <input id="url" type="text" class="form-control to-slugify" name="url">
    </div>
</form>

<form>
  <div class="form-group">
      <label for="fullname">Full Name</label>
    <!-- auto initialize via `data-slugger`, `data-slug-separator` is for defining custom space replacer -->
        <input id="fullname" type="text" class="form-control" name="fullname" data-slugger="#username" data-slug-separator="_">
    </div>
    <div class="form-group">
      <label for="username">Username</label>
        <input id="username" type="text" class="form-control" name="username">
    </div>
</form>