Change form input value with javascript

HTMLElement: change event

The change event is fired for , , and elements when the user modifies the element’s value. Unlike the input event, the change event is not necessarily fired for each alteration to an element’s value .

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("change", (event) => >); onchange = (event) => >; 

Event type

Examples

element

HTML

label> Choose an ice cream flavor: select class="ice-cream" name="ice-cream"> option value="">Select One …option> option value="chocolate">Chocolateoption> option value="sardine">Sardineoption> option value="vanilla">Vanillaoption> select> label> div class="result">div> 

body  display: grid; grid-template-areas: "select result"; > select  grid-area: select; > .result  grid-area: result; > 

JavaScript

const selectElement = document.querySelector(".ice-cream"); const result = document.querySelector(".result"); selectElement.addEventListener("change", (event) =>  result.textContent = `You like $event.target.value>`; >); 

Result

Text input element

For some elements, including , the change event doesn’t fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.

HTML

input placeholder="Enter some text" name="name" /> p id="log">p> 

JavaScript

const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("change", updateValue); function updateValue(e)  log.textContent = e.target.value; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in elements used to never fire a change event in Gecko until the user hit Enter or switched the focus away from the (see Firefox bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.

Found a content problem with this page?

This page was last modified on Apr 24, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Change Input Value in JavaScript

1. Change the Input Value Using the value Property in JavaScript
2. Change the Input Value Using the setAttribute() Function in JavaScript

This tutorial will discuss changing the input value using the value property or the setAttribute() function in JavaScript.

Change the Input Value Using the value Property in JavaScript

We use an input tag to get input from a user, and we can use the value property to change the input value. First of all, we need to get the element whose value we want to change using its id or name, and then we can use the value property to set its value to our desired value. To get an element in JavaScript, we can use the getElementById() or the querySelector() function. For example, let’s make a form with input and give it an id to get the element in JavaScript using the getElementById() and set its value using the value property. See the code below.

 html> head>head> body> form>  input type="text" id= "123" name="ABC" value="Some Value">  form>  body> script type="text/javascript"> var Myelement = document.getElementById("123"); console.log(Myelement.value); Myelement.value = "New value"; console.log(Myelement.value);  script>  html> 

In the above code, we used the document.getElementById() function to get the element using its id, and on the next line, we printed the current input value using the console.log() function. After that, we used the value property to set the input value to our desired value, and after that, we printed the new value on the console. You can also use the querySelector() function to select the element whose input value you want to change. For example, let’s repeat the above example using the querySelector() function. See the code below.

 html> head>head> body> form>  input type="text" id= "123" name="ABC" value="Some Value">  form>  body> script type="text/javascript"> var Myelement = document.querySelector('input[name="ABC"]'); console.log(Myelement.value); Myelement.value = "New value"; console.log(Myelement.value);  script>  html> 

In the above code, we used the querySelector() function to get the element.

Change the Input Value Using the setAttribute() Function in JavaScript

We can also use the setAttribute() function instead of the value property to set the input value. We can also use the forms() function instead of the getElementById() or querySelector() function to get the element using the form name and input name. For example, let’s repeat the above example with the setAttribute() and froms() function. See the code below.

 html> head>head> body> form name="FormABC">  input type="text" id= "123" name="ABC" value="Some Value">  form>  body> script type="text/javascript"> var Myelement = document.forms['FormABC']['ABC']; console.log(Myelement.value); Myelement.setAttribute('value','New value'); console.log(Myelement.value);  script>  html> 

As you can see, the output of all these methods is the same, so you can use whatever method you like depending on your requirements.

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

Related Article — JavaScript Input

Источник

change

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировать ссылку «Кратко» Скопировано

Событие change срабатывает, когда пользователь изменяет значение в , или и фиксирует свои изменения.

Это событие лучше всего использовать при создании форм, когда не требуется постоянно взаимодействовать с каждым изменённым символом в поле ввода. Так же данное событие пригодится и при создании чекбоксов, полей выбора и т. п.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 const input = document.querySelector('.input') input.addEventListener('change', function (event)  console.log(event.target.value)>) const input = document.querySelector('.input') input.addEventListener('change', function (event)  console.log(event.target.value) >)    Скопировать Скопировано Не удалось скопировать   

Пример

Скопировать ссылку «Пример» Скопировано

💡 В зависимости от указанного типа в HTML элементе, change срабатывает по-разному. Лучше всего это становится понятным на примерах.

Как понять

Скопировать ссылку «Как понять» Скопировано

Подробнее о механизме событий читай в статье «Событийная модель».

Событие change похоже на события input и blur , но есть важные отличия:

blur – срабатывает каждый раз при расфокусировке поля.
input – срабатывает сразу же при изменении значения поля.
change – срабатывает когда значение поля изменено, но при условии снятия с него фокуса.

Источник

События: change, input, cut, copy, paste

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

Событие: change

Событие change срабатывает по окончании изменения элемента.

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

Пока мы печатаем в текстовом поле в примере ниже, событие не происходит. Но когда мы перемещаем фокус в другое место, например, нажимая на кнопку, то произойдёт событие change :

Для других элементов: select , input type=checkbox/radio событие запускается сразу после изменения значения:

 Выберите что-нибудь Вариант 1 Вариант 2 Вариант 3 

Событие: input

Событие input срабатывает каждый раз при изменении значения.

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

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

С другой стороны, событие input не происходит при вводе с клавиатуры или иных действиях, если при этом не меняется значение в текстовом поле, т.е. нажатия клавиш ⇦ , ⇨ и подобных при фокусе на текстовом поле не вызовут это событие.

Событие input происходит после изменения значения.

Поэтому мы не можем использовать event.preventDefault() там – будет уже слишком поздно, никакого эффекта не будет.

События: cut, copy, paste

Эти события происходят при вырезании/копировании/вставке данных.

Они относятся к классу ClipboardEvent и обеспечивают доступ к копируемым/вставляемым данным.

Мы также можем использовать event.preventDefault() для предотвращения действия по умолчанию, и в итоге ничего не скопируется/не вставится.

Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить:

Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл из файловой системы и вставить его.

Существует список методов в спецификации для работы с различными типами данных, чтения/записи в буфер обмена.

Но обратите внимание, что буфер обмена работает глобально, на уровне ОС. Большинство браузеров в целях безопасности разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя, к примеру, в обработчиках событий onclick .

Также запрещается генерировать «пользовательские» события буфера обмена при помощи dispatchEvent во всех браузерах, кроме Firefox.

Итого

Событие	Описание	Особенности
change	Значение было изменено.	Для текстовых полей срабатывает при потере фокуса.
input	Срабатывает при каждом изменении значения.	Запускается немедленно, в отличие от change .
cut/copy/paste	Действия по вырезанию/копированию/вставке.	Действие можно предотвратить. Свойство event.clipboardData предоставляет доступ на чтение/запись в буфер обмена…

Задачи

Депозитный калькулятор

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

Любое изменение введённых данных должно быть обработано немедленно.

// initial: начальная сумма денег // interest: проценты, например, 0.05 означает 5% в год // years: сколько лет ждать let result = Math.round(initial * (1 + interest) ** years);

Источник