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