Establecer valor de campo oculto con jQuery
-
Utilice el método
.val()para establecer el campo oculto - Use el selector de atributos CSS para establecer el campo oculto
-
Utilice el método
.attr()para establecer el campo oculto
Puede usar tres opciones para establecer un campo oculto usando jQuery. El primero y el segundo utilizarán los métodos .val() y .attr(), mientras que el último utilizará un selector de atributos CSS.
Este artículo enseña cómo usarlos todos usando ejemplos de código.
Utilice el método .val() para establecer el campo oculto
Podemos usar el método jQuery .val() para establecer el valor del campo oculto. Todo lo que necesita es el selector CSS correcto que actuará como un proxy; a partir de ahí, puede cambiar el valor.
El código HTML a continuación tiene un valor de entrada con type=hidden; esto lo convierte en un campo oculto. Luego, puede usar el método .val() para establecer su valor.
Cuando ejecute el código en su navegador web, verá el valor oculto en un mensaje de alerta de JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="google" value="google"> Google
</label>
<label>
<input type="checkbox" name="facebook" value="facebook"> Facebook
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using the val method.
$("#hidden_input").val("top_companies");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
Producción:
Use el selector de atributos CSS para establecer el campo oculto
El uso de un selector de atributos CSS para establecer un campo oculto también requiere el método jQuery .val(). Esta es una opción para usted si no puede usar ID de HTML o clases de CSS.
El siguiente HTML es el mismo, pero hemos actualizado las casillas de verificación. En el código jQuery, tomará la entrada oculta usando un selector de atributos CSS y establecerá su valor con el método .val().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="erlang" value="erlang"> Erlang
</label>
<label>
<input type="checkbox" name="elixir" value="elixir"> Elixir
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using a CSS attribute selector
$("input[id=hidden_input]").val("functional_languages");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
Producción:
Utilice el método .attr() para establecer el campo oculto
El método .attr() es un enfoque directo para establecer un valor oculto. El proceso es agarrar el campo oculto; use el método .attr() para escribir un nuevo valor oculto.
A partir de esto, puede usar el valor oculto más adelante en su código. Aquí, lo mostrará en un mensaje de alerta de JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="hewlett-packard" value="hewlett-packard"> Hewlett-Packard
</label>
<label>
<input type="checkbox" name="asus" value="asus"> ASUS
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using
$("#hidden_input").attr("value", "computer_companies");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
Producción:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn