Jquery метод .change()

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

В jQuery чтение значений элементов , и осуществляется посредством метода .


Например, получим значение элемента :

<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>

Метод , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
  // получим значение первого элемента в коллекции
  var valColor = $('input').val();
  console.log(valColor); // white
  // получим значение выбранной (checked) радиокнопки
  var valCheckedColor = $( "input:checked" ).val();
  console.log(valCheckedColor); // green
</script>

Для получения значения выбранного элемента (, , или кнопок) используйте .

// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input:checked').val();
// получить значение установленной радиокнопки
$('input:checked').val();

Если коллекции нет элементов, то метод возвращает значение .

Например, получим значение элемента , имеющего имя :

var valDescription =  $('textarea').val();
if (valDescription !== undefined) {
  console.log('Значение элемента textarea: ' + valDescription);
} else {
  console.log('Элемент textarea с именем description на странице не найден!');
}

Получим значение элемента :

<select id="volume">
  <option>16Gb</option>
  <option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
  var volume = $(this).val();
  console.log(volume);  
});
</script>

Если элемент имеет множественный выбор (атрибут ), то метод возвратит в качестве результата массив, содержащий значение каждой выбранной опции (). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение ).

<select id="brands" multiple="multiple">
  <option selected="selected">Acer</option>
  <option>Samsung</option>
  <option selected="selected">Asus</option>
</select>

<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>

Изменение HTML контента элемента

Например, заменим содержимое элемента :

<ul>
  <li>молоко 1 литр</li>
  <li>яйца 2 шт.</li>
  <li>мука  270 гр.</li>
</ul>
...
<script>
  $('ul').html('<li>молоко 500 мл литр</li><li>яйца 3 шт.</li><li>мука  200 гр.</li>');
</script>

Если на странице будет несколько элементов , то данный метод заменит содержимое каждого из них.

Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через .

<ul id="ingredients">
  ...
</ul>
...
<script>
  $('#ingredients').html('Новый HTML контент...');
</script>

Использование функции для замены HTML контента элемента:

<h2>Название 1...</h2>
<h2>Название 2...</h2>
<h2>Название 3...</h2>  
...
<script>  
$('h2').html(function(index, oldhtml) {
  // index – индекс элемента в выборке
  // oldhtml – контент элемента
  var newhtml = (index+1) + '. ' + oldhtml;
  return newhtml;
});
</script>

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

<div class="number">75</div>
<div class="number">37</div>
<div class="number">64</div>
<div class="number">17</div>
<div class="number">53</div> 
...
<script>  
var newNumber = [];
for (var i = 0; i <= 4; i++) {
  newNumber = Math.floor(Math.random() * 99) + 1;
};
$('.number').html(function(index, oldhtml) {
  // index – индекс элемента в выборке
  // oldhtml – контент элемента
  // this – текущий элемент
  // изменим фон текущего элемента на случайный
  $(this).css('background-color','yellow');
  var newhtml = '<s>'+oldhtml+'</s> '+ newNumber;
  return newhtml;
});
</script>

A Callback Function for text(), html(), and val()

All of the three jQuery methods above: , , and , also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function.

The following example demonstrates and with a callback function:

Example

$(«#btn1»).click(function(){   $(«#test1»).text(function(i, origText){     return «Old text: » + origText + » New text: Hello world!     (index: » + i + «)»;   }); }); $(«#btn2»).click(function(){   $(«#test2»).html(function(i, origText){     return «Old html: » + origText + » New html: Hello <b>world!</b>     (index: » + i + «)»;   }); });

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс , а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор Описание Примеры
Выбирает первый элемент в наборе отобранных элементов.
Выбирает последний элемент в наборе отобранных элементов.
Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( = первый элемент, = второй и так далее).
Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1).
Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего.
Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы.
Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы

Отметим, что данные селекторы не работают также как ,, и так далее. Например, выбирает только пункт списка с классом , который является первым пунктом в соответствующем списке. А находит все пункты списка на странице, которые имеют класс  , а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки  в первых двух строках таблицы, которая имеет ID :

var selectedElements = $("table#myTable tr:lt(2) > td");

События мыши

Метод Описание
.click() Привязывает JavaScript обработчик событий «click» (клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.contextmenu() Привязывает JavaScript обработчик событий «contextmenu» (вызов контекстного меню на элементе — клик правой кнопкой мыши), или запускает это событие на выбранный элемент.
.dblclick() Привязывает JavaScript обработчик событий «dblclick» (двойной клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.hover() Связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении.
.mousedown() Привязывает JavaScript обработчик событий «mousedown» (нажатие кнопки мыши на элементе), или запускает это событие на выбранный элемент.
.mouseenter() Привязывает JavaScript обработчик событий «mouseenter» (срабатывает, когда указатель мыши заходит на элемент), или запускает это событие на выбранный элемент.
.mouseleave() Привязывает JavaScript обработчик событий «mouseleave» (срабатывает, когда указатель мыши выходит из элемента), или запускает это событие на выбранный элемент.
.mousemove() Привязывает JavaScript обработчик событий «mousemove» (срабатывает, когда указатель мыши перемещается внутри элемента), или запускает это событие на выбранный элемент.
.mouseout() Привязывает JavaScript обработчик событий «mouseout» (срабатывает, когда указатель мыши покидает элемент), или запускает это событие на выбранный элемент.
.mouseover() Привязывает JavaScript обработчик событий «mouseover» (срабатывает, когда указатель мыши входит в элемент), или запускает это событие на выбранный элемент.
.mouseup() Привязывает JavaScript обработчик событий «mouseup» (срабатывает, когда указатель мыши находится над элементом и кнопка мыши отпущена), или запускает это событие на выбранный элемент.

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

Изменение значения элемента формы в jQuery осуществляется с помощью метода .

Например, при клике на кнопку установим элементу её текст:

<div>
  <button>Кнопка 1</button>
  <button>Кнопка 2</button>
  <button>Кнопка 3</button>
</div>
<input type="text" value="Нажмите на кнопку!">
...
<script>
$('button').click(function() {
  var text = $(this).text();
  $('input').val(text);
});
</script>

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.


Например, преобразуем все буквы значения элемента после потеря фокуса в прописные:

<input type="text" value="Некоторое значение поля">
...
<script>
$('input').on('blur', function() {
  // установим значение полю
  $(this).val(function(index, value) {
    return value.toUpperCase();
  });
});
</script>

Например, поменяем значение элемента :

<select name="color">
  <option value="red">Красный</option>
  <option value="green" selected>Зелёный</option>
  <option value="blue">Синий</option>
</select>

<script>
// 1 вариант (установим в качестве значения select значение опции blue)
$('select option').attr('selected', 'selected');
// 2 вариант
$('select').val('blue');
</script>

Например, присвоим значения элементу с множественным выбором ():

<select id="language" multiple="multiple">
  <option value="english" selected="selected">Английский</option>
  <option value="french">Французский</option>
  <option value="spanish" selected="selected">Испанский</option>
  <option value="china">Китайский</option>
</select>
...
<script>
  $('#language').val();
</script>

Изменим, значение :

<input type="checkbox" name="language" value="english"> Вы знаете английский
...
<script>
  $('input').val('en');
</script>

5 ответов

245 Лучший ответ

Согласно , вы можете слушать события клавиатуры, такие как или , а не .

Обновление: используйте React.Component

Вот код, использующий React.Component, который делает то же самое

Вот это jsfiddle.

07 июль 2015, в 16:58 Поделиться 20

нажатие Введите, когда фокус на элементе управления (ввод) обычно вызывает событие (onSubmit) в самой форме (а не на входе), чтобы вы могли привязать ваш к форме onSubmit.

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

07 июль 2015, в 17:02 Поделиться 19


Вы можете использовать onKeyPress непосредственно в поле ввода. функция onChange изменяет значение состояния при каждом изменении поля ввода и после нажатия Enter вызывается функция search().

23 окт. 2017, в 19:34 Поделиться 3

Вы можете использовать

02 фев. 2018, в 17:02 Поделиться 1

Реагируйте пользователи, здесь ответ на полноту.

Вы либо хотите обновить для каждого нажатия клавиши, либо получить значение только при отправке. Добавление ключевых событий в компонент работает, но есть альтернативы, рекомендованные в официальных документах.

Контролируемые и неконтролируемые компоненты

Управляемая

Из Документов — Формы и Контролируемые компоненты:

Если вы используете контролируемый компонент, вам придется обновлять состояние при каждом изменении значения. Чтобы это произошло, вы привязываете обработчик события к компоненту. В примерах документов, как правило, событие onChange.

Пример:

1) Связать обработчик событий в конструкторе (значение сохраняется в состоянии)

2) Создать функцию обработчика

3) Создать функцию отправки формы (значение берется из состояния)

4) Визуализация

Если вы используете контролируемые компоненты, ваша функция всегда будет , чтобы обновить и сохранить правильное состояние. Состояние всегда будет иметь обновленное значение, и когда форма будет отправлена, значение будет взято из состояния. Это может быть неудобно, если ваша форма очень длинная, потому что вам нужно будет создать функцию для каждого компонента или написать простую, которая обрабатывает каждое изменение значения компонента.

неконтролируемая

Из Документов — Неконтролируемый компонент

Основное отличие здесь заключается в том, что вы используете не функцию , а формы для получения значений и проверки при необходимости.

Пример:

1) Привязать обработчик событий и создать ссылку для ввода в конструкторе (значение не сохраняется в состоянии)

2) Создать функцию отправки формы (значение берется из компонента DOM)

3) Визуализация

Если вы используете неконтролируемые компоненты, нет необходимости связывать функцию . Когда форма отправлена, значение будет взято из DOM, и в этот момент могут произойти необходимые проверки. Нет необходимости создавать какие-либо функции-обработчики для любого из компонентов ввода.

Ваша проблема

Теперь по вашей проблеме:

Если вы хотите добиться этого, используйте неконтролируемый компонент. Не создавайте обработчики onChange, если в этом нет необходимости. Клавиша отправит форму и функция будет .

Изменения, которые вам нужно сделать:

Удалите вызов onChange в вашем элементе

Обработайте отправленную форму и подтвердите ваш вклад. Вам нужно получить значение из вашего элемента в функции отправки формы, а затем проверить. Убедитесь, что вы создали ссылку на ваш элемент в конструкторе.

Пример использования неконтролируемого компонента:

31 авг. 2018, в 16:08 Поделиться

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода prevAll()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  var lastDiv = $( "div:last" ); // инициализируем переменную, содержащую последний элемент <div> в документе
	 
	  lastDiv.css( "border","1px solid green" ) // устанавливаем сплошную границу размером 1 пиксель зеленого цвета
	          .prevAll() // выбираем все предыдущие элементы
	          .css( "border", "1px solid red" ); // устанавливаем сплошную границу размером 1 пиксель красного цвета
		
	  lastDiv.prevAll( "p" ) // выбираем все предыдущие элементы с определенным селектором
	          .css( "color", "orange" ); // устанавливаем оранжевый цвет текста
	});
		</script>
	</head>
	<body>
		<div>Первый div</div>
		<p>Параграф 1</p>
		<p>Параграф 2</p>
		<div>Второй div
			<p>Вложенный параграф 1</p>
			<p>Вложенный параграф 2</p>
		</div>
		<div>Третий div</div>
	</body>
</html>

В этом примере мы инициализируем переменную, содержащую последний элемент <div> в документе. После этого с помощью метода .css() устанавливаем этому элементу сплошную границу размером 1 пиксель зеленого цвета, с помощью метода .prevAll() выбираем все предыдущие сестринские элементы и с помощью метода .css() устанавливаем им сплошную границу размером 1 пиксель красного цвета.

Кроме того, с помощью метода .prevAll() выбираем все предыдущие сестринские элементы перед последним элементом <div> в документе, которые соответствуют селектору (элемент <p>) и устанавливаем им оранжевый цвет текста.

Результат нашего примера:

Пример использования метода prevAll()jQuery перемещения

Set Attributes — attr()

The jQuery method is also used to set/change attribute values.

The following example demonstrates how to change (set) the value of the href attribute in a link:

Example

$(«button»).click(function(){   $(«#w3s»).attr(«href», «https://www.w3schools.com/jquery/»); });

The method also allows you to set multiple attributes at the same time.

The following example demonstrates how to set both the href and title attributes at the same time:

Example

$(«button»).click(function(){   $(«#w3s»).attr({     «href» : «https://www.w3schools.com/jquery/»,     «title» : «W3Schools jQuery Tutorial»   }); });


С этим читают