Esta publicación tiene 14 meses de antigüedad, te invitamos a buscar publicaciones más recientes relacionados a este tema aquí.

Hola chicos, el día de hoy les dejaré en esta publicación cómo seleccionar campos de texto con JQuery. Los elementos HTML pueden ser seleccionados de la siguiente manera con JQuery $("input[type='text']"); veamos el ejemplo:

 

Colocamos 3 campos tipo texto cómo se muestra a continuación:

<!DOCTYPE html>
<html>
	<head>
		<title>Seleccion de campo de texto</title>
	</head>
	<body>
		<form>
			<input type="text" name="user" value="Criss">
			<input type="text" name="addr" value="Guadalajara">
			<input type="text" name="city" value="Mexico">
		</form>
		<p>Output: <span id="out"></span></p>
 
		<script src="jquery-2.2.1.min.js"></script>
		<script type="text/javascript" src="logic.js"></script>
	</body>
</html>
 

Tendremos la siguiente vista:

1Text.png

En un archivo externo llamado logic.js colocamos el siguiente código, el cual nos ayudará a colocar en la etiqueta span el valor que contiene el campo de texto 1:

$(document).ready(function() {
	// Selecciono el primer iput(posicion 0) y obtengo su valor.
	var user = $("input[type='text']").eq(0).val();
 
	//Una vez que obtengo el valor, lo imprimo en la etiqueta span.
	$('#out').text(user);
 
});
 

Tenemos la siguiente vista:

2Text.png

Si queremos obtener cualquier otro campo de texto y cambiarle su valor hacemos lo siquiente:

$(document).ready(function() {
	// Selecciono el primer iput(posicion 0) y obtengo su valor.
	var user = $("input[type='text']").eq(0).val();
 
	//Una vez que obtengo el valor, lo imprimo en la etiqueta span.
	$('#out').text(user);
 
	// Si queremos reemplazar el texto de un iput
	$("input[type='text']").eq(1).val('Otro texto');
});
 

Y la vista será:

3Text.png

Un placer,

@telecristy.

¿Te gustó esta publicación? Márcala como favorita