Как изменить значение input jquery

Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:

<input id="text" type="text" name="form-text">

А jQuery связывается с ним по атрибуту id="text" (селектор #text).

$('#text').val();
// или
$('#text').attr('value');

$('#text').val('Новый текст');

// Добавить текст в начало
$('#text').val('before ' + $('#text').val());

// Добавить текст в конец
$('#text').val($('#text').val() + ' after');

// Добавить класс
$('#text').addClass('active');

// Удалить класс
$('#text').removeClass('active');

// Переключить класс
$('#text').toggleClass('active');

// Событие когда элемент получил фокус
$('#text').focus(function(){
	alert('Фокус установлен');
});

// Когда элемент теряет фокус
$('#text').blur(function(){
	alert('Фокус снят');
});

$('#text').focus(function(){
	$(this).select();
});

// Заблокировать
$('#text').prop('disabled', true);

// Разблокировать
$('#text').prop('disabled', false);

<input id="text" type="text">
<p id="result">0</p>

<script>
$('#text').bind('input', function(){
	$('#result').html($(this).val().length);
});
</script>

// Строчные
$('#text-1').bind('input', function(){
	$(this).val($(this).val().toLowerCase());
});

// Заглавные
$('#text-2').bind('input', function(){
	$(this).val($(this).val().toUpperCase());
});

$('#text').bind('cut copy paste', function(e) {
	e.preventDefault();
});

$('#text').bind('input', function(){
	$.ajax({
		url: '/ajax.php', 
		method: 'post',
		dataType: 'html',
		data: {text: $('#text').val()},
		success: function(data){
			$('#result').html(data);
		}
	});
});

Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.

В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:

• html – для чтения и изменения HTML содержимого элемента;
• text – для чтения и изменения текстового содержимого элемента;
• val – для чтения и изменения значения элементов формы.

Например, получим HTML содержимое элемента с идентификатором (id) contact:

// сохраним HTML контент элемента в переменную contactHTML
var contactHTML = $('#contact').html();  

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

<p>Содержимое 1...</p>
<p>Содержимое 2...</p>
...
<script>
  var htmlContent = $('p').html();
  console.log(htmlContent);
</script>

Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each):

$('p').each(function(){
  // выведем содержимое текущего элемента в консоль
  console.log($(this).html());
});

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

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

<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.

<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[i] = 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[index];
  return newhtml;
});
</script>

Получение текстового содержимого элемента

В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text. При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

<p id="output"></p>
<button id="get-text">Получить текстовый контент элемента p</button>
<p id="text">Этот параграф содержит <a href="#">ссылку</a>.</p>
...
<script>  
$('#get-text').click(function() {
  var textContent = $('#text').text();
  $('#output').text(textContent);
});
</script>

Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).

Замена контента элемента указанным текстом

Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

<div id="info">
  Некоторый контент...
</div>
...
<script>  
  $('#info').text('<p>Другой контент...</p>');
</script>

После выполнения, элемент div с классом info будет иметь следующий HTML код:

<div id="info">
  &lt;p&gt;Другой контент...&lt;/p&gt;
</div>

На экране данный элемент будет выглядеть так:

<p>Другой контент...</p>

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

<p>Контент 1 ...</p>
<p>Контент 2 ...</p>
<p>Контент 3 ...</p>
...
<script>  
  $('p').text('Новый контент...');
</script>

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

<p class="text">Некоторое содержимое...</p>
<p class="text">Ещё некоторый контент...</p>
...
<script>
$('.text').text(function(index,text) {
  // параметры функции: index (порядковый номер элемента в выборке), text (его текущее содержимое)
  var textLength = text.length;
  return text + ' ('+ text.length +')';
});
</script>

Удаление контента элемента

В jQuery для удаления содержимого элемента имеется метод empty. Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.

Например, удалим содержимое всех элементов с классом vote:

<div class="vote">Контент...</div>
...
<script>
  $('.vote').empty();
</script>

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

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

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

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

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

<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[name="color"]').val();
  console.log(valColor); // white
  // получим значение выбранной (checked) радиокнопки
  var valCheckedColor = $( "input[type=radio][name=color]:checked" ).val();
  console.log(valCheckedColor); // green
</script>

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

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

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

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

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

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

<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>

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

<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>

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

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

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

<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 после потеря фокуса в прописные:

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

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

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

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

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

<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(['french', 'china']);
</script>

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

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

Get the current value of the first element in the set of matched elements or set the value of every matched element.

// Get the value from a dropdown select
$( "select.foo option:selected").val();
// Get the value from a dropdown select even easier
// Get the value from a checked checkbox
$( "input:checkbox:checked" ).val();
// Get the value from a set of radio buttons
$( "input:radio[name=bar]:checked" ).val();

    return elem.value.replace( /r?n/g, "rn" );

$( "input:text.items" ).val(function( index, value ) {
  return value + " " + this.className;

• Связанные категории:
• Manipulation
  » General Attributes

 #   

• Forms

 #   

• Attributes

Возвращает или устанавливает значение атрибута value

• version added: 1.0.val()

  нет параметров

• version added: 1.0.val( value )

  value

  Тип: Строка или Массив

  Строка текста или массив строк, которые для заполнения элемента. Устанавливает значение атрибута value.

• version added: 1.4.val( function(index, value) )

  function(index, value)

  Тип: Функция

  Атрибуту value будет присвоено значение, которое вернет функция function. Функция для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index (позиция элемента в наборе) и value (текущее значение атрибута value у элемента).

Метод используется для получения значений элементов формы таких как input, select, textarea. Метод возвращает строку, в случае <select multiple=»multiple»> массив

Для элементов select и чекбоксов, мы можем так же использовать :selected и :checked:

$('select.foo option:selected').val();    // достаём значение из элемента select
$('select.foo').val();                    // альтернативный способ
$('input:checkbox:checked').val();        // достаём значение из чекбокса
$('input:radio[name=bar]:checked').val(); // достаём значение из группы радио кнопок

Примеры

Пример: достать значение из элемента select и массив значений из множественного селектов.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { color:red; margin:4px; }
 b { color:blue; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p></p>
 <select id="single">
   <option>Single</option>
   <option>Single2</option>
 </select>
 <select id="multiple" multiple="multiple">
   <option selected="selected">Multiple</option>
   <option>Multiple2</option>
   <option selected="selected">Multiple3</option>
 </select>
<script>
   function displayVals() {
     var singleValues = $("#single").val();
     var multipleValues = $("#multiple").val() || [];
     $("p").html("<b>Single:</b> " +
                 singleValues +
                 " <b>Multiple:</b> " +
                 multipleValues.join(", "));
   }
   $("select").change(displayVals);
   displayVals();
</script>
</body>
</html>

Демо

Пример: получить значение поля input.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { color:blue; margin:8px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <input type="text" value="some text"/>
 <p></p>
<script>
   $("input").keyup(function () {
     var value = $(this).val();
     $("p").text(value);
   }).keyup();
</script>
</body>
</html>

Демо

Так же мы можем задавать значения.

Примеры

Пример: задаём значение полю input.

<!DOCTYPE html>
<html>
<head>
 <style>
 button { margin:4px; cursor:pointer; }
 input { margin:4px; color:blue; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div>
   <button>Feed</button>
   <button>the</button>
   <button>Input</button>
 </div>
 <input type="text" value="click a button" />
<script>
   $("button").click(function () {
     var text = $(this).text();
     $("input").val(text);
   });
</script>
</body>
</html>

Демо

Пример: используем функция в качестве аргумента для установки значения input.

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p>Type something and then click or tab out of the input.</p>
 <input type="text" value="type something" />
<script>
 $('input').on('blur', function() {
   $(this).val(function( i, val ) {
     return val.toUpperCase();
   });
 });
 </script>
</body>
</html>

Демо

Пример: задаём значение селекту из одного значения, и множественному селекту, а так же чекбоксам и группе радио кнопок.

<!DOCTYPE html>
<html>
<head>
 <style>
 body { color:blue; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <select id="single">
   <option>Single</option>
   <option>Single2</option>
 </select>
 <select id="multiple" multiple="multiple">
   <option selected="selected">Multiple</option>
   <option>Multiple2</option>
   <option selected="selected">Multiple3</option>
 </select><br/>
 <input type="checkbox" name="checkboxname" value="check1"/> check1
 <input type="checkbox" name="checkboxname" value="check2"/> check2
 <input type="radio"  name="r" value="radio1"/> radio1
 <input type="radio"  name="r" value="radio2"/> radio2
<script>
   $("#single").val("Single2");
   $("#multiple").val(["Multiple2", "Multiple3"]);
   $("input").val(["check1","check2", "radio1" ]);
</script>
</body>
</html>

Демо

.val()

Метод позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута value; для списков выбора (select) – значение value выбранного элемента (в случае множественного выбора – массив значений); в случае с textarea, метод .val() будет работать непосредственно с содержимым тега textarea. Метод имеет три варианта использования:

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

Замечание: важно отметить, что используя метод .val(), вы получите значения атрибута value, только у первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

В действии

Если в одном из текстовых полей, в которые нужно записывать любимые продукты, значение окажется отличным от «Шоколад», то пользователь получит замечание:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
   input{
      width:240px;
      margin:3px;
   }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~b~gt~Укажите любимые продукты:~lt~/b~gt~~lt~br~gt~
  ~lt~input type="text" value="Колбаса" /~gt~~lt~br~gt~
  ~lt~input type="text" value="Шоколад" /~gt~~lt~br~gt~
  ~lt~input type="text" value="Пиво" /~gt~~lt~br~gt~
  ~lt~input type="text" value="Спагетти" /~gt~ 

  ~lt~div id="state"~gt~ ~lt~/div~gt~
~lt~script~gt~
    $("input:text").val(
	  function(index, x){
	    if(x != "Шоколад")
	    	return "Шоколад лучше чем " + x;
	    else
	    	return x;
	  }
	);
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Список всех функций для манипуляции с элементами страницы