Как установить значение скрытого поля ввода через JavaScript?

Kak Ustanovit Znacenie Skrytogo Pola Vvoda Cerez Javascript



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

В этом блоге будет обсуждаться процедура установки значения скрытого поля ввода через JavaScript.







Как установить значение скрытого поля ввода через JavaScript?

Чтобы установить значение скрытого поля ввода через JavaScript, примените следующие подходы:



Способ 1: установить значение скрытого элемента с помощью свойства innerHTML

внутреннийHTML » возвращает HTML-контент элемента. Это свойство можно использовать для установки и добавления пользовательского значения к выделенному скрытому полю ввода.



Синтаксис:





элемент.innerHTML = текст

В приведенном выше синтаксисе « элемент ” относится к элементу, к которому необходимо добавить “ текст ' ценить.



Пример

Давайте рассмотрим приведенный ниже пример:

< вход тип знак равно 'скрытый' я бы знак равно 'скрытый элемент' ценить знак равно '' >
< сценарий >
позволять мой ввод = подсказка ( 'Пожалуйста, введите текст' , '' ) ;
если ( мой ввод ! = ноль ) {
позволять х = документ.getElementById ( 'скрытый элемент' ) .innerHTML = 'Значение скрытого элемента: ' + мой ввод;
тревога ( Икс )
}
сценарий >

В приведенном выше блоке кода:

  • Во-первых, создайте поле ввода с указанными атрибутами.
  • тип ” атрибут со значением “ скрытый ” означает, что это скрытое поле.
  • После этого « быстрый диалоговое окно принимает значение от пользователя.
  • Теперь примените проверку определяемого пользователем значения, чтобы оно не было « нулевой ' с использованием ' если ' состояние.
  • Наконец, получите доступ к скрытому полю ввода по его « я бы ' с использованием ' получитьэлемент по идентификатору() ” и установите для него пользовательское значение через “ внутреннийHTML ' имущество.
  • Наконец, отобразите добавленное значение с помощью предупреждения.

Вывод

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

Метод 2: установка значения скрытого элемента с использованием подхода jQuery

При таком подходе jQuery « значение() ” будет использоваться для присвоения значения видимого текстового поля ввода скрытому полю ввода.

Пример

Давайте рассмотрим следующий код:

< п > Введите значение за скрытый элемент п >
< вход я бы знак равно 'мой ввод' ценить знак равно '' тип знак равно 'текст' />< бр >
< вход я бы знак равно 'скрытый элемент' тип знак равно 'скрытый' ценить знак равно '' />
< бр >
< кнопка я бы знак равно 'бтншоу' > Представлять на рассмотрение кнопка >
< сценарий источник знак равно 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > сценарий >
< сценарий >
$ ( '#бтнШоу' ) .на ( 'щелкнуть' , функция ( ) {
позволять входное значение = $ ( '#мой ввод' ) .val ( ) ;
$ ( '#скрытыйЭлемент' ) .val ( входное значение ) ;
тревога ( 'Значение скрытого элемента: ' + входное значение ) ;
} ) ;
сценарий >

В приведенных выше строках кода:

  • Во-первых, включите текстовое поле ввода с указанными атрибутами.
  • Точно так же выделите еще одно скрытое поле ввода, как видно из его « тип атрибут.
  • Добавлен тег
  • После этого подключите библиотеку jQuery с помощью кнопки « источник ” атрибут в “ <скрипт> ' ярлык.
  • В коде JS получите доступ к созданной кнопке и свяжите « на() ” с ним для выполнения функции по нажатию кнопки.
  • В определении функции получите доступ к видимому входу « текст » и получить его значение с помощью « значение() метод.
  • На следующем шаге полученное значение будет размещено на скрытом вводе». текст ” через поле “ значение() метод.
  • Наконец, отобразите результирующее значение, присвоенное « скрытое поле ввода » через оповещение.

Вывод

В приведенном выше выводе видно, что значение видимого ввода « текст поле выделено для « скрытый ' поле ввода.

Заключение

Чтобы установить значение скрытого поля ввода через JavaScript, примените « внутреннийHTML ' свойство или jQuery ' значение() метод. Свойство innerHTML можно использовать для применения желаемой функциональности путем добавления определяемого пользователем значения. Метод val() может применяться для присвоения значения видимого текстового поля ввода скрытому полю ввода. В этом блоге обсуждалась процедура установки значения скрытого поля ввода с помощью JavaScript.