Al crear un formulario o un cuestionario, puede haber un requisito para asignar un valor de entrada del usuario a un campo específico. Por ejemplo, agregar entradas confidenciales, es decir, una contraseña o un valor codificado para poder utilizarlas. En tales casos, establecer el valor de un elemento de entrada oculto a través de JavaScript ayuda a mantener los datos seguros y protegidos.
Este blog discutirá el procedimiento para establecer el valor de un campo de entrada oculto a través de JavaScript
¿Cómo establecer el valor de un campo de entrada oculto a través de JavaScript?
Para establecer el valor del campo de entrada oculto a través de JavaScript, aplique los enfoques indicados a continuación:
Método 1: establezca el valor del elemento oculto a través de la propiedad innerHTML
Él ' HTML interno La propiedad ” devuelve el contenido HTML del elemento. Esta propiedad se puede utilizar para establecer y agregar el valor definido por el usuario al campo de entrada oculto asignado.
Sintaxis:
elemento.innerHTML = texto
En la sintaxis anterior, “ elemento ” se refiere al elemento que debe agregarse con el “ texto ' valor.
Ejemplo
Veamos el ejemplo que se indica a continuación:
< aporte escribe = 'oculto' identificación = 'elemento oculto' valor = '' >< guion >
dejar miEntrada = aviso ( 'Por favor ingrese su texto' , '' ) ;
si ( mi entrada ! = nulo ) {
dejar x = documento.getElementById ( 'elemento oculto' ) .innerHTML = 'El valor del elemento oculto es: ' + miEntrada;
alerta ( X )
}
guion >
En el bloque de código anterior:
- En primer lugar, cree el campo de entrada que tenga los atributos indicados.
- Él ' escribe ” atributo con el valor “ oculto ” significa que es un campo oculto.
- Después de eso, el “ oportuno El cuadro de diálogo ” toma un valor del usuario.
- Ahora, aplique una verificación sobre el valor definido por el usuario de modo que no sea ' nulo ' utilizando el ' si ' condición.
- Por último, acceda al campo de entrada oculto por su ' identificación ' utilizando el ' getElementById() ” y establezca el valor definido por el usuario a través del “ HTML interno ' propiedad.
- Finalmente, muestre el valor agregado a través de una alerta.
Producción
Como se observa, el valor de entrada del usuario se agrega al campo de entrada oculto.
Método 2: establezca el valor del elemento oculto utilizando el enfoque jQuery
En este enfoque, jQuery's ' valor() ” se utilizará para asignar el valor del campo de texto de entrada visible al campo de entrada oculto.
Ejemplo
Repasemos el siguiente código:
< pag > Introduce el valor por elemento oculto pag >< aporte identificación = 'miEntrada' valor = '' escribe = 'texto' />< hermano >
< aporte identificación = 'elemento oculto' escribe = 'oculto' valor = '' />
< hermano >
< botón identificación = 'btnMostrar' > Entregar botón >
< guion origen = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > guion >
< guion >
$ ( '#btnMostrar' ) .en ( 'hacer clic' , función ( ) {
dejar valor de entrada = $ ( '#miEntrada' ) .val ( ) ;
$ ( '#elemento oculto' ) .val ( valor de entrada ) ;
alerta ( 'El valor del Elemento oculto es: ' + valor de entrada ) ;
} ) ;
guion >
En las líneas de código anteriores:
- En primer lugar, incluya un campo de texto de entrada que tenga los atributos indicados.
- Del mismo modo, asigne otro campo de entrada oculto, como se desprende de su ' escribe ' atributo.
- Se agregó la etiqueta
- Después de eso, incluya la biblioteca jQuery con la ayuda de “ origen atributo ” en el “