Ao criar um formulário ou questionário, pode haver um requisito para alocar um valor de entrada do usuário para um campo específico. Por exemplo, anexar entradas confidenciais, ou seja, uma senha ou um valor codificado para utilizá-los. Nesses casos, definir o valor de um elemento de entrada oculto por meio do JavaScript ajuda a manter os dados seguros e protegidos.
Este blog discutirá o procedimento para definir o valor de um campo de entrada oculto por meio de JavaScript
Como definir o valor de um campo de entrada oculto por meio de JavaScript?
Para definir o valor do campo de entrada oculto por meio de JavaScript, aplique as abordagens indicadas abaixo:
Método 1: Definir o valor do elemento oculto por meio da propriedade innerHTML
O ' HTML interno ” retorna o conteúdo HTML do elemento. Essa propriedade pode ser utilizada para definir e anexar o valor definido pelo usuário ao campo de entrada oculto alocado.
Sintaxe:
element.innerHTML = texto
Na sintaxe acima, “ elemento ” refere-se ao elemento que precisa ser anexado com o “ texto ' valor.
Exemplo
Vamos passar pelo exemplo abaixo indicado:
< entrada tipo = 'escondido' Eu iria = 'hiddenElement' valor = '' >< roteiro >
deixar minhaentrada = prompt ( 'Por favor digite seu texto' , '' ) ;
E se ( minhaentrada ! = nulo ) {
deixar x = document.getElementById ( 'hiddenElement' ) .innerHTML = 'O valor do elemento oculto é: ' + minhaEntrada;
alerta ( x )
}
roteiro >
No bloco de código acima:
- Em primeiro lugar, crie o campo de entrada com os atributos declarados.
- O ' tipo ” atributo com o valor “ escondido ” significa que é um campo oculto.
- Depois disso, o “ incitar ” caixa de diálogo recebe um valor do usuário.
- Agora, aplique uma verificação no valor definido pelo usuário de forma que não seja “ nulo ” usando o “ E se ' doença.
- Por fim, acesse o campo de entrada oculto por seu “ Eu iria ” usando o “ getElementById() ” e defina o valor definido pelo usuário para ele por meio do “ HTML interno ' propriedade.
- Por fim, exiba o valor anexado por meio de um alerta.
Saída
Conforme observado, o valor de entrada do usuário é anexado ao campo de entrada oculto.
Método 2: Definir o valor do elemento oculto usando a abordagem jQuery
Nesta abordagem, o “ val() ” será utilizado para alocar o valor do campo de texto de entrada visível para o campo de entrada oculto.
Exemplo
Vamos analisar o seguinte código:
< p > Digite o valor para elemento oculto p >< entrada Eu iria = 'minha entrada' valor = '' tipo = 'texto' />< br >
< entrada Eu iria = 'hiddenElement' tipo = 'escondido' valor = '' />
< br >
< botão Eu iria = 'btnMostrar' > Enviar botão >
< roteiro origem = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > roteiro >
< roteiro >
$ ( '#btnMostrar' ) .em ( 'clique' , função ( ) {
deixar valor de entrada = $ ( '#minhaentrada' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( valor de entrada ) ;
alerta ( 'O valor do elemento oculto é: ' + valor de entrada ) ;
} ) ;
roteiro >
Nas linhas de código acima:
- Em primeiro lugar, inclua um campo de texto de entrada com os atributos declarados.
- Da mesma forma, aloque outro campo de entrada oculto, como fica evidente em seu “ tipo ” atributo.
- Adicionada tag
- Depois disso, inclua a biblioteca jQuery com a ajuda do “ origem ” no atributo “