Блог

HTML:

 <div>
  <div style='margin-top: 30px' class='form-group align-items-center'> 
    <form> 
      <input name='test-id' class='form-control' id='test-id' type='text'>
    </form> 
  </div> 
  <div id='form-button' type='button' class='btn btn-danger'>Submit</div>
</div>
  

js:

 $(document).ready(function(){
 $(document).on('click', '#form-button', function(e) {
   console.log($("#test-id").val())
 }) 
})
  

codepen: https://codepen.io/vorousjames/pen/PoNramd?editors=0001

регистрирует «» вместо значения.

Почему это не работает

Журнал консоли работает нормально. Когда внутри текстового поля нет значения, оно, очевидно, выдаст «» в качестве вывода. Хотя это очевидно и никаких изменений не требуется, фрагменты в качестве ответов мне не показались правильными, поэтому я публикую, как это должно быть сделано.

Чтобы предотвратить отправку form при нажатии enter , event.preventDefault() используется. Кроме того, если вы хотите, чтобы код генерировал выходные данные только тогда, когда внутри текстового поля есть какое-то значение, вы извлекаете значение, обрезаете его с помощью trim() , который удаляет пробелы, проверяет, пусто ли оно («» выдает false), и регистрирует консоль, только если оно не пустое.

 $(document).on('click', '#form-button', function(event) {
  let val = $("#test-id").val().trim();
  if (val) {
    console.log(val);
  }
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div style='margin-top: 30px' class='form-group align-items-center'>
    <form onsubmit="event.preventDefault();">
      <input name='test-id' class='form-control' id='test-id' type='text'>

      <button id='form-button' type='button' class='btn btn-danger'>Submit</button>
    </form>
  </div>
</div>  

Codepen, на который вы ссылаетесь, работает для меня. Он регистрирует «» input , если вызываемый элемент val() пуст. Если вы сначала введете в него что-то, а затем нажмете «Отправить», он выведет что-то другое, кроме «».

На самом деле он регистрирует правильное значение, когда вы нажимаете на него.

Скорее всего, вы нажимаете enter, и поскольку ваш ввод находится внутри формы, нажатие enter отправит форму, поэтому вы видите пустую строку.

Вам нужно исправить свою форму, просто чтобы продемонстрировать, я добавил return false в метод отправки формы, чтобы избежать отправки формы.

 $(document).ready(function() {
  $(document).on('click', '#form-button', function(e) {
    console.log($("#test-id").val())
  })
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div style='margin-top: 30px' class='form-group align-items-center'>
    <form onsubmit="return false">
      <input name='test-id' class='form-control' id='test-id' type='text'>
    </form>
  </div>
  <button id='form-button' type='button' class='btn btn-danger'>Submit</button>
</div>  

Правильная форма должна быть примерно такой:

 function checkValues() {
  console.log($("#test-id").val())
};  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div style='margin-top: 30px' class='form-group align-items-center'>
    <form onsubmit="checkValues(); return false;">
      <input name='test-id' class='form-control' id='test-id' type='text'>

      <button id='form-button' type='submit' class='btn btn-danger'>Submit</button>
    </form>
  </div>
</div>