JavaScriptJQuery 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. 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

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Un comentario

  1. Hola.
    Como seria la forma cuando el input que recive el valor se encuentra en la siguiente pagina despues que das click en el boton agrgar valor?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba