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>

#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».

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