16.3 C
Москва
16.07.2026

21

Как получить input в javascript

как сделать input в js

Для создания input с помощью JavaScript можно использовать метод createElement для создания элемента input , а затем добавить его в DOM.

Пример создания input с типом «text»:

const input = document.createElement('input'); input.type = 'text'; document.body.append(input);

В этом примере мы создали элемент input , задали ему тип «text» и добавили его на страницу с помощью метода append .

Можем задавать и другие атрибуты для элемента input , такие как name , value , placeholder и т.д. Например, чтобы добавить атрибут name :

const input = document.createElement('input'); input.type = 'text'; input.name = 'myInput'; document.body.append(input);

Как и для других элементов DOM-дерева, для данного input мы можем добавить обработчик события:

const input = document.createElement('input'); input.type = 'text'; input.addEventListener('input', (event) =>  console.log(event.target.value); >); document.body.append(input);

Получаем данные из поля ввода с помощью input.value

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

Адрес e-mail добавлен в список получателей рассылки.

Адрес электронной почты в сообщении должен быть тем, который введёт пользователь. Как его получить?

Нам поможет особое свойство, которое есть у полей ввода, — value . Допустим, на странице есть поле ввода input :

Босс проходил мимо и ввёл туда своё имя — Кекс. С помощью свойства value мы можем получить данные из этого поля ввода. А после, например, вывести их в консоль:

let input = document.querySelector('input'); console.log(input.value); // Выведет: Кекс

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

paragraph.textContent = input.value;

И теперь то, что ввёл пользователь в поле input , отобразится на странице как текстовое содержимое элемента paragraph .

В нашем случае пользователь вводит свой адрес в поле с классом subscription-email . Найдём его и скажем JavaScript вывести полученные данные на страницу.

Почему бы не прочитать текст из поля ввода с помощью textContent ? Если мы попытаемся это сделать, то получим пустую строку. Для JavaScript поля формы не имеют текстового содержимого, их значения хранятся именно в value .

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  • script.js Сплит-режим

FlashNews!

На главную

email

Новая библиотека для создания графиков

Теперь вы можете создать дашборд за считанные секунды.

Что там у роботов?

В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.

© FlashNews!


JavaScript

let page = document.querySelector(‘.page’); let themeButton = document.querySelector(‘.theme-button’); themeButton.onclick = function() < page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); >; let message = document.querySelector(‘.subscription-message’); let form = document.querySelector(‘.subscription’); // Объявите переменную здесь form.onsubmit = function(evt) < evt.preventDefault(); // Измените значение textContent на следующей строке message.textContent = 'Форма отправлена!'; >;

Показать ответ

Спасибо! Мы скоро всё исправим)

get the input box ‘name’ using javascript

I am making form in PHP and submitting using javascript. I want to get the name of input box, As normal coding gives the value of the input box, but i need to get name of input box. Without onclick functionality on it. Can it possible that retrieving the name of input box in other javascript function on click a button. for example

Now onclick a other button I am calling test() , In test() how can I get the name of the input box.
53k 38 38 gold badges 146 146 silver badges 201 201 bronze badges
asked Oct 11, 2012 at 5:59
Parth Sarthi Gour Parth Sarthi Gour
95 1 1 gold badge 2 2 silver badges 4 4 bronze badges

5 Answers 5

var txtbox = document.getElementById("d"); var txtboxname = txtbox.name;

answered Oct 11, 2012 at 6:03
Priyank Patel Priyank Patel
6,908 11 11 gold badges 58 58 silver badges 88 88 bronze badges

u can do that by using attr function.

in yout test function add this.

$('#d').attr('name'); // this will return text_name in your case (if you are using jquery) 
var inputname=document.getElementById("d").name //javascript

answered Oct 11, 2012 at 6:04
36.4k 9 9 gold badges 49 49 silver badges 62 62 bronze badges

put this on your javascript function

var name=document.getElementById("d").name;

answered Oct 11, 2012 at 6:04
2,775 2 2 gold badges 15 15 silver badges 20 20 bronze badges

function test() return document.getElementById(«d»).name; >

answered Oct 11, 2012 at 6:14
81 5 5 bronze badges

Not really sure what you are trying to do, but if your script is called from a listener on a button in the form, you can do:

Then the doSubmit function is something like:

function doSubmit(el) < var form = el.form; var control, controls = form.elements; for (var i=0, iLen=controls.length; i>

I would strongly recommend that your form has a standard submit button and works without any scripting, then you can add your scripted submission to the form’s submit handler. It can cancel the standard submit and do its own thing.

That way if script is disabled, not available or fails for some reason, the user can still submit the form.

Как получить значение из input javascript

Чтобы получить значение из элемента input , достаточно обратиться к свойству value . Например, если на странице имеется такой элемент ввода:

 id="input-id">

то из него можно получить значение следующим образом

const input = document.getElementById('input-id'); // Извлекаем элемент input const value = input.value; // получаем занчение из input
Читать:
Какое отличие java от javascript

Похожие записи

Как пользоваться эпл вотч без сознания пары

admin

Колокол 21 телеграмм канал кто автор

admin

Как сделать орнамент в coreldraw

admin