Tomar value de INPUT y setar en otro INPUT

jmanuelprince · #1 (**permalink**) 21/10/2011, 09:31

Saludos, he investigado la forma de realizar esta actividad y me he encontrado con varias soluciones solo que en la mayoría de ellas solo se permite tomar el value de un input y setearlo como un label, mi intención es mostrarlo en otro input al mismo tiempo en que se escribe en el primer campo, porque encontré otra solución en la que se toma el valor pero solo se setea en el campo siguiente al recargar la pagina.
Ejemplo:

Código:

<!DOCTYPE html>
 <html>
<head>
  <style>
  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input type="text" id="texto" value="some text"/>
  <p></p>

<script>
var variable =document.getElementById('texto').value;
document.writeln('<input type="text" name="numero" id="txt_numero" value="' +
    variable + '" ><br>');

$("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>

</body>
</html>

En este ejemplo se presentan las 2 formas que he encontrado como ya dije, en la primera tomo el valor del campo y lo seteo pero este solo se muestra al recargar, y en el otro se setea al momento de escribir como es deseable, pero se muestra como un label y no en el value del otro campo ya que no encuentro la forma de setear esto en el value del campo de texto.
Gracias de antemano por su ayuda.

maycolalvarez · #2 (**permalink**) 21/10/2011, 09:44

Código Javascript:

Ver original$(document).ready(function () {
    $("#input1").keyup(function () {
        var value = $(this).val();
        $("#input2").val(value);
    });
});

tan simple como eso, y solo necesitas definir 2 inputs:

<input type="text" id="input1" />
<input type="text" id="input2" />

PD: ya reporté el mensaje para que lo muevan al foro de javascript

jmanuelprince · #3 (**permalink**) 21/10/2011, 10:50

Hola muchas gracias por tu respuesta, pero la probe y no obtengo ningun resultado, aqui te envio el codigo para ver si estoy haciendo algo mal:

Código:

<!DOCTYPE html>
<html>
<head>
<script>
      $(document).ready(function () {
          $("#texto1").keyup(function () {
              var value = $(this).val();
              $("#texto2").text(value);
          });
      });
</script>

</head>
<body>
  <input type="text" id="texto1" value=""/><br>
 <input type="text" id="texto2" value=""/>
</body>
</html>

maycolalvarez · #4 (**permalink**) 21/10/2011, 12:36

si no incluyes jQuery es obvio que no funcione

además, no me había percatado de $("#input2").text(value);, debe ser:

$("#input2").val(value);

jmanuelprince · #5 (**permalink**) 21/10/2011, 13:35

No amigo alguna otra cosa estoy haciendo mal porque a pesar de que agregue el JQuery, y despues el jquery-latest igualmente no me funciona aquí te adjunto como lo probé

Código:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js">

      $(document).ready(function () {
          $("#texto1").keyup(function () {
              var value = $(this).val();
              $("#texto2").val(value);
          });
      });
</script>

</head>
<body>
  <input type="text" id="texto1" value=""/><br>
 <input type="text" id="texto2" value=""/>
</body>
</html>

maycolalvarez · #6 (**permalink**) 21/10/2011, 13:42

los bloques script vinculados no deben contener código, deben estár vacios, además debes de definir (por estandares) un type al bloque:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//text plain js code
</script>

jmanuelprince · #7 (**permalink**) 21/10/2011, 13:43

Ya encontre la forma lo hice de esta manera:

Código:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.0.4.js"></script>
<script>
      $(document).ready(function () {
          $("#texto1").keyup(function () {
              var value = $(this).val();
              $("#texto2").val(value);
          });
      });
</script>

</head>
<body>
  <input type="text" id="texto1" value=""/><br>
 <input type="text" id="texto2" value=""/>
</body>
</html>

Gracias por su valiosa ayuda

the_winner · #8 (**permalink**) 08/06/2013, 09:15

Cordial saludo a todos..

Soy reciente en esta comunidad y pues espero concer muchas personas por aqui y compartir y colaborar en todo lo que este a mi alcance. Bueno como todo recien llegado a estas comuidades siempre viene con una primer pregunta y es la siguiente...

Tomando el codigo que se ha usado para pasar el valor de un Input a otro quise hacer una modificacion para que cuando ingresara una fecha en un input esa fecha fuera procesada y en el otro input me mostrara una fecha futura. Todo esta funcionando bien a excepcion de que el la fecha procesada no se muestra en el otro Input...
Agradezco su ayuda... Anexo codigo

<?php
include('conexion.php');
$pridosis=$_POST['pridosis'];
if($pridosis!=false){
$fechaprox1 = mysql_query('SELECT DATE_ADD("'.$pridosis.'", INTERVAL 1 month) as dato');
$fechaprox2= mysql_fetch_array($fechaprox1);
echo $fechaprox2['dato'];
}
?>

<html>
<head>
<script src="scriptjs/jquery-1.0.4.js"></script>
<script>
$(document).ready(function () {
$("#pridosis").change(function () {
var value = $(this).val(<?php echo $fechaprox2['dato']; ?>);
$("#calculofecha").val(value);
});
});
</script>
</head>
<body>
<form action="" name="form1" method="post">
<input type="pridosis" name="pridosis" id="pridosis" value=""/><br>
<input type="text" name="text2" id="calculofecha" value="<?php echo $fechaprox2['dato']; ?>" disabled/>
</form>

</body>
</html>