.val()

Что такое .val() в JQuery

Он может использоваться для работы с элементами формы, такими как input, select и textarea. 
.val() может быть вызван на любом элементе формы, который имеет значение, например, на input-поле, select-элементе или textarea.

Примеры использования .val()

Получение значения элемента формы

Для получения значения элемента формы с помощью .val() необходимо передать в качестве параметра название элемента формы. Например, для получения значения input с идентификатором "myInput" необходимо использовать следующий код:

var inputValue = $('#myInput').val();

Получаем значение элемента формы input с идентификатором "myInput" и записываем его в переменную inputValue.

Установка значения элемента формы

Для установки значения элемента формы с помощью .val() необходимо передать в качестве параметра новое значение. Например, для установки значения input с идентификатором "myInput" равным "Hello, World!" необходимо использовать следующий код:

$('#myInput').val('Hello, World!');

Устанавливаем значение элемента формы input с идентификатором "myInput" равным "Hello, World!".

Получение выбранного значения в select

Для получения выбранного значения в элементе select необходимо использовать .val() без параметров. Например, для получения выбранного значения в select с идентификатором "mySelect" необходимо использовать следующий код:

var selectedValue = $('#mySelect').val();

Получаем выбранное значение элемента формы select с идентификатором "mySelect" и записываем его в переменную selectedValue.

Проверка наличия значения в input

$('#myInput').on('input', function() {
  var inputValue = $(this).val();
  if (inputValue) {
    console.log('Значение введено');
  } else {
    console.log('Значение не введено');
  }
});

При каждом вводе значения в элемент формы input с идентификатором "myInput" проверяем, что значение не пустое, и выводим соответствующее сообщение в консоль.

Обновление значения select

$('#myButton').click(function() {
  $('#mySelect').val('option2');
});

По клику на элемент с идентификатором "myButton" обновляем значение элемента формы select с идентификатором "mySelect" на "option2".

Получение значения textarea и отправка его через AJAX

$('#myForm').submit(function(event) {
  event.preventDefault();
  var message = $('#myTextarea').val();
  $.ajax({
    url: 'send_message.php',
    method: 'POST',
    data: { message: message }
  })
  .done(function(response) {
    console.log(response);
  })
  .fail(function() {
    console.log('Ошибка при отправке сообщения');
  });
});

При отправке формы с идентификатором "myForm" получаем значение элемента формы textarea с идентификатором "myTextarea", отправляем его через AJAX на сервер и выводим ответ в консоль.

Обновление значения input при выборе значения в select

$('#mySelect').change(function() {
  var selectedValue = $(this).val();
  $('#myInput').val(selectedValue);
});

При изменении выбранного значения элемента формы select с идентификатором "mySelect" обновляем значение элемента формы input с идентификатором "myInput" на выбранное значение.

Заключение

В целом, .val() - это важный метод, который должен быть знаком каждому разработчику, работающему с JQuery. Он прост в использовании и способен значительно улучшить работу с формами на сайте. Рекомендуется изучать все возможности этого метода и применять его в своих проектах для создания более интерактивных веб-страниц.