Portada » JQuery biblioteca de JavaScript » Pasar el valor de un input a otro input con jQuery

Pasar el valor de un input a otro input con jQuery

Pasar el valor de un input a otro input con jQuery. En este artículo veremos tres maneras de pasar información de un input a otro input de manera simultánea utilizando el lenguaje jQuery y JavaScript.

Por ejemplo, si tengo un input con el identificador llamado nombres, esta pasara dinámicamente a otro input con el ID llamado nombres2.

Pasar datos al digitar de un input a otro input con jQuery

Este proceso se puede utilizar en varios aspectos en el desarrollo de un sistema web, veamos algunos ejemplos que aplicaremos en esta entrada.

#1 Utilizando lenguaje jQuery

.keyup()

Descripción: vincula un controlador de eventos al evento de JavaScript «keyup» o activa ese evento en un elemento.

Utilizaremos la función por defecto del jQuery y también incluiremos el evento «keyup» para realizar este proceso de copiar la información de un Input HTML a otro Input.

Sin embargo, para que jQuery funcione necesitaremos de librerías.

<link rel="stylesheet" te cype="text/css" href="bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script>

Estas librerías deben estar declaradas en la etiqueta «HEAD» dentro de nuestro archivo PHP o HTML.

<script type="text/javascript">
// Campos Nombres
$(document).ready(function () {
        $("#nombres1").keyup(function () {
            var value = $(this).val();
            $("#nombres2").val(value);
        });
});
// Campos apellidos
$(document).ready(function () {
        $("#apellidos1").keyup(function () {
            var value = $(this).val();
            $("#apellidos2").val(value);
        });
});
</script>
Pasar el valor de un input a otro input con jQuery BaulPHP
Pasar el valor de un input a otro input con jQuery BaulPHP

#2 Utilizando lenguaje JavaScript

Con el lenguaje JavaScript solo utilizaremos una función llamada «PasarValor» y en ella llamaremos mediante el identificador ID al input que queremos pasar la información

function PasarValor()
{
document.getElementById("nombre2").value = document.getElementById("nombre1").value;
}
</script>

El formulario y los input

<form class="form-inline" method="POST" action="">
<label>Nombres: </label>  </div>
<input type="text" id="nombre1" placeholder="Ingrese contenido"  class="form-control" onkeyup="PasarValor();">  

<br><br>
<label>Nombres: </label>
<input type="text"  id="nombre2" placeholder="Recibe contenido"  class="form-control">  

</form>

#3 También utilizando el lenguaje JavaScript

<form class="form-inline" method="POST" action=""> 
<label>Nombres: </label> 
<input class="form-control" type="text" id="trord" onblur="document.getElementById('uno').value=this.value" />
<label>Nombres: </label>
<input type="text" id="uno" placeholder="Recibe contenido"  class="form-control">  

</form>

Aplicamos el lenguaje JavaScript dentro del input a través del evento «ONBLUR» y declaramos el input que recibirá los datos mediante el identificador «uno».

Pasar el valor de un input a otro input con jQuery y JavaScript
Pasar el valor de un input a otro input con jQuery y JavaScript

CONCLUSIÓN

En ocasiones cuando estemos desarrollando sistemas web es necesario este proceso. Sin embargo, podemos utilizar otras opciones según sea el caso. Aquí vimos como pasar la información de un input a otro utilizando jQuery y JavaScript.

Espero que esta breve explicación les sirva bastante.

DEMO Y DESCARGA

Ver Demo Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad