Как вставить в input текст через js

Свойства и методы формы

Формы и элементы управления, такие как <input> , имеют множество специальных свойств и событий.

Работать с формами станет намного удобнее, когда мы их изучим.

Навигация: формы и элементы

Формы в документе входят в специальную коллекцию document.forms .

Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.

Когда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .

Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .

В этом случае form.elements[name] является коллекцией, например:

Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .

Форма может содержать один или несколько элементов <fieldset> внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.

Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .

Другими словами, вместо form.elements.login мы можем написать form.login .

Это также работает, но есть небольшая проблема: если мы получаем элемент, а затем меняем его свойство name , то он всё ещё будет доступен под старым именем (также, как и под новым).

В этом легче разобраться на примере:

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

Обратная ссылка: element.form

Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.

Элементы формы

Рассмотрим элементы управления, используемые в формах.

input и textarea

К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.

Обратим внимание: хоть элемент <textarea>. </textarea> и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.

Там хранится только тот HTML, который был изначально на странице, а не текущее значение.

select и option

Элемент <select> имеет 3 важных свойства:

select.options – коллекция из подэлементов <option> ,
select.value – значение выбранного в данный момент <option> ,
select.selectedIndex – номер выбранного <option> .

Они дают три разных способа установить значение в <select> :

Найти соответствующий элемент <option> и установить в option.selected значение true .
Установить в select.value значение нужного <option> .
Установить в select.selectedIndex номер нужного <option> .

Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.

Вот эти способы на примере:

В отличие от большинства других элементов управления, <select> позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple . Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов <option> .

Их коллекцию можно получить как select.options , например:

new Option

Элемент <option> редко используется сам по себе, но и здесь есть кое-что интересное.

В спецификации есть красивый короткий синтаксис для создания элемента <option> :

text – текст внутри <option> ,
value – значение,
defaultSelected – если true , то ставится HTML-атрибут selected ,
selected – если true , то элемент <option> будет выбранным.

Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).

Читать:

Не открывается опен офис что делать

Тот же элемент, но выбранный:

Элементы <option> имеют свойства:

option.selected Выбрана ли опция. option.index Номер опции среди других в списке <select> . option.value Значение опции. option.text Содержимое опции (то, что видит посетитель).

Ссылки

Спецификация: https://html.spec.whatwg.org/multipage/forms.html.

Итого

Свойства для навигации по формам:

document.forms Форма доступна через document.forms[name/index] . form.elements Элементы формы доступны через form.elements[name/index] , или можно просто использовать form[name/index] . Свойство elements также работает для <fieldset> . element.form Элементы хранят ссылку на свою форму в свойстве form .

Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.

Для элемента <select> мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .

Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.

В следующей главе мы рассмотрим такие события, как focus и blur , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.

How to add text to form input

I am really not sure where to start with this. I have a form input box and submit button. When the submit button is pressed, the form content is submitted and used in some javascript. What I want to do is automatically add some text to the end of the submission.

So if a user inputs «The dog walked» and pressed submit, the form would add «across the street.» to the end of the submission.

3 Answers 3

In your event listener for the form’s submit action, change the input.

W3 schools is your friend: Form onsubmit Event
So in your case it’s something similar to:

Как сделать в инпутах текст, через js?

Всем привет! У меня есть разметка, в которой есть текст. Через js я его меняю в инпутах. Изначально, когда еще текст не меняется в инпутах поля пустые. Как сделать, чтоб текст из разметки отображался в полях инпута изначально, который можно сразу редактировать? То-есть, когда в разметке меняю текст, то в поле инпута появляется этот текст и его можно в инпуте редактировать.
Если в разметке нет текста, то поля должны быть пустыми, где написанно: «Имя», «Фамилия»
Ссылка на код https://playcode.io/533725/
У меня получается так

А надо так