JavaScript Obtener valor de cuadro de texto
Este tutorial enseña sobre la propiedad de valor de texto y la función jQuery val() para obtener el valor de un cuadro de texto de JavaScript.
La propiedad de valor de texto se utiliza para devolver o establecer el valor del atributo de valor del campo de entrada. El atributo de valor muestra el valor inicial del cuadro de texto de entrada. Puede tener valores definidos por el usuario o valores predeterminados.
El método jQuery val() es para obtener el valor del elemento del formulario. Aquí, el elemento de formulario significa los elementos input, textarea y select. Devuelve el undefined si se llama en una colección vacía. La función val() establece o devuelve el valor del atributo de valor de los elementos seleccionados.
Con esta función, podemos establecer el valor del atributo de valor para todos los elementos coincidentes y devolver el valor del atributo de valor del primer elemento coincidente. Recuerde, esta función se usa principalmente con elementos de formulario HTML.
El código HTML seguirá siendo el mismo para todos los ejemplos (excepto el que usa el elemento <form>), pero el código JavaScript seguirá cambiando para practicar diferentes formas.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title> Learning JavaScript Get Textbox Value</title>
</head>
<body>
Full Name: <input type="text" id="fullName" name="fullName" value="Mehvish Ashiq">
<button type="button" onclick="nameFunction()">Submit</button>
<p id="displayName"></p>
</body>
</html>
Diferentes formas de obtener el valor de JavaScript Textbox
A continuación se proporcionan varios fragmentos de código de JavaScript para obtener el valor del cuadro de texto de JavaScript.
function nameFunction() {
var element = document.getElementById('fullName').value;
document.getElementById('displayName').innerHTML = element;
}
PRODUCCIÓN:
El primer método que estamos aprendiendo para obtener el valor del cuadro de texto es document.getElementById(). Selecciona el primer elemento con el atributo id con el valor particular (aquí, es fullName), obtiene su valor usando la propiedad .value y lo guarda en la variable element. El document.getElementById() se usa nuevamente para modificar el contenido de un elemento que tiene el valor de id displayName. Para actualizar el contenido se utiliza la propiedad .innerHTML.
function nameFunction() {
// first element in DOM (index 0) with name="fullName"
var element = document.getElementsByName('fullName')[0].value
document.getElementById('displayName').innerHTML = element;
}
PRODUCCIÓN:
El código JavaScript anterior usa document.getElementByName para obtener la lista de todos los elementos que tienen el nombre dado (fullName para esta instancia). El valor del elemento en el índice 0 se selecciona de la lista de todos los elementos. Esto también se puede usar si su elemento no tiene un atributo de identificación.
function nameFunction() {
document.getElementById('displayName').innerHTML =
document.forms[0].elements[0].value;
}
PRODUCCIÓN:
El código anterior modifica el contenido de un elemento cuyo valor de id es displayName y asigna el valor recibido del índice 0. Recuerda, debes tener un elemento <form> en tu archivo HTML para obtener el valor por índice.
function nameFunction() {
document.getElementById('displayName').innerHTML = $('input:text').val();
}
PRODUCCIÓN:
El fragmento de código anterior presenta el método jQuery val(), que se utiliza para acceder al valor del cuadro de texto de JavaScript. Este método obtiene el valor del primer elemento input cuyo tipo es text. No olvide incluir jQuery en la etiqueta <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
