Неопределенный показ в $ .ajax при наведении курсора мыши при отладке, и значение не передается

Question

Я пытаюсь получить свои значения из поля с помощью ajax, но ajax не работает, и когда я отлаживаю его в Firefox, тогда на $.ajax отображается undefined.

Проверьте эту ссылку, пожалуйста, для опции отладки моего браузера http://prntscr.com/m8xnxy

$(document).ready(function() {
  $("#add").click(function() {
    var search = $("#names").val();
    $.ajax({
      type: "POST",
      url: "http://localhost/ajax/shakil.php",
      data: { search: search },
      success: function(data) {
        alert(data);
      }
    });
  });
});

<form class="col-sm-4">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input
      type="text"
      class="form-control"
      id="names"
      aria-describedby="emailHelp"
      placeholder="Enter email"
    />
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>

  <button type="submit" class="btn btn-primary" id="add" name="submit">
    Submit
  </button>
</form>