pasar valor de un link a un campo de texto (imput text)

xluchex · #1 (**permalink**) 09/02/2011, 08:03

hola amigos, bueno estoy entrando al mundo de javaScript... me tope con un problema:

tengo 3 link

link link link

Cada una con un respectivo valor.

Debajo tengo un Campo de Texto (imput text)

Quisiera que al hacer clik en cualquier enlace el valor del LINK pase al Campo de Texto (imput text)... todo este proceso en la misma pagina.

COmo envio el valor del link y como lo recibo en el campo de texto?, de antemano muchas GRACIAS!. Saludos

IsaBelM · #2 (**permalink**) 09/02/2011, 08:23

en vez de usar link usa botones con css para que parezcan links. para insertar el valor del botón en el textbox, haces referencia al objeto + innerHTML. también puedes usar innerText (ie) y textContent (demás)

xluchex · #3 (**permalink**) 09/02/2011, 09:27

Gracias por tu ayuda, mmm :s recien entro al mundo de JavaScript y la verdad esta en chino lo que me dices (no entiendo) :( talvez un poco mas de ayuda please. gracias de antemano.

TyrantRC · #4 (**permalink**) 09/02/2011, 09:39

Hay una forma mas facil

<html>
<head>
<title>titulo</title>

<script>
function cargarInput(){

var valorDelInput="http://www.google.com"
document.formularioCualquiera.nombreInput.value=va lorDelInput
}
</script>
<body>
en el html:
<form name="formularioCualquiera">
<a href="#" onclick="cargarInput();" name="link" id="link">imprimir</a>
<input value="Default" name="nombreInput" id="nombreInput"><input>
</form>
</body>
</html>

xluchex · #5 (**permalink**) 09/02/2011, 09:59

como? alguien que me pueda guiar, lei por ahi.. q con evento OnClick se lo puede realizar... necesito un poco mas de ayuda please.

TyrantRC · #6 (**permalink**) 09/02/2011, 10:28

Cita:

Iniciado por xluchex

como? alguien que me pueda guiar, lei por ahi.. q con evento OnClick se lo puede realizar... necesito un poco mas de ayuda please.

Revisa lo que te edite.. ese es el codigo al que te refieres supongo ...Lo que pasa es que me tarde editando porque ando en el trabajo y bueno me llamo la jefa x,D

raxper · #7 (**permalink**) 09/02/2011, 10:46

IsaBelM · #8 (**permalink**) 09/02/2011, 12:37

Cita:

Iniciado por IsaBelM

en vez de usar link usa botones con css para que parezcan links

todo lo demás no lo tengas en cuenta, se me fue la pinza y empecé ha hablar sobre un elemento de bloque
tomando el html de raxper

Cita:

xluchex · #9 (**permalink**) 09/02/2011, 15:03

Hola Gracias por las respuesta ya logre realizar lo que andaba buscando este es el diseño que buscaba realizar

ahora lo q me falta es sacar el resultado, LOGRO SACAR el RESULTADO pero lo que quiero es que se muestre en la misma pagina de bajo de mis dos campos de texto, lo realize con

Código:

document.write("El valor es " + total);

Código:

alert ("El valor es " + total);

el primero me saca el resultado en otra pagina y el 2do me lo saca en una ventana, como puedo sacar el resultado en la misma hoja... GRACIAS DE ANTEMANO!

nox_gdl · #10 (**permalink**) 09/02/2011, 15:11

Creo que empece a leer el tema tarde, espero que te ayude mi comentario:

<a href="javascript:agregarValor(10);">El enlace 1 = 10</a>
<a href="javascript:agregarValor(15);">El enlace 2 = 15</a>
<a href="javascript:agregarValor(20);">El enlace 3 = 20</a>

<input type="text" name="tuCampo" id="tuCampo">

<script>
function agregarValor(valor){
document.getElementById('tuCampo').value= valor;
}
</script>

Al hacer clic sobre tu enlace el valor del campo cambiara instantaneamente en la misma página, si quieres investigar mas te puede servir la palabra DOM (Document Object Model).

Saludos.

xluchex · #11 (**permalink**) 09/02/2011, 15:26

me funciono a la perfeccion... GRACIAS, pero ahora lo que necesito es mostrar el resultado de mi suma en la misma pagina, como lo hago? esa es mi pregunta ahora, muchas GRACIAS de antemano!

IsaBelM · #12 (**permalink**) 09/02/2011, 15:35

revisa este tema y comprende el código

nox_gdl · #13 (**permalink**) 09/02/2011, 15:45

Modifique un poco el primero que te comente, ok, espero que le saques provecho al siguiente ejemplo:


<a href="javascript:agregarValor(1,10);">10</a>
<a href="javascript:agregarValor(1,15);">15</a>
<a href="javascript:agregarValor(1,20);">20</a>



<a href="javascript:agregarValor(2,30);">30</a>
<a href="javascript:agregarValor(2,35);">35</a>
<a href="javascript:agregarValor(2,40);">40</a>


<input type="text" name="campo1" id="campo1" >
<input type="text" name="campo2" id="campo2" >

<input type="button" onclick="calcular();" value="calcular" >

El resultado es: <span id="resultado"></span>
<script>

function agregarValor(campo, valor){
document.getElementById('campo'+campo).value= valor;
}

function calcular(){
var r= document.getElementById('campo1').value + document.getElementById('campo2').value;
document.getElementById('resultado').innerHTML = r;
}
</script>

xluchex · #14 (**permalink**) 09/02/2011, 16:40

hola y gracias, esta marchando bien rescata los valores de campo1 y campo 2 pero no la suma:

el resultado q me muestra es

campo 1 es 40 + campo 2 50 = 4050

revise no se cual sera el problema... no suma si no lo concatena, gracias de antemano!

caricatos · #15 (**permalink**) 09/02/2011, 17:20

Hola:

No entiendo la intención de que sea un link

... las etiquetas "a" o links/enlaces tienen un sentido semántico concreto que es anclar o enlazar

Si quieres algo a la respuesta de un click del ratón, el enlace es uno de los peores elementos. Mucho más adecuado en mi opinión es un botón, y si debe parecer un enlace, es fácil con los estilos (la mano es cursor: pointer)

Saludos

nox_gdl · #16 (**permalink**) 09/02/2011, 17:32

El problema es que te lo esta concatenando (suma de cadenas). Vamos a hacer caso a las recomendaciones de usar css y a hacer una conversión a numero (manera no recomendada pero rapida):
<style>
.ancla {cursor:pointer; color:blue;}
</style>


<span class="ancla" onclick="agregarValor(1,10);">10</span>
<span class="ancla" onclick="agregarValor(1,15);">15</span>
<span class="ancla" onclick="agregarValor(1,20);">20</span>



<span class="ancla" onclick="agregarValor(2,30);">30</span>
<span class="ancla" onclick="agregarValor(2,35);">35</span>
<span class="ancla" onclick="agregarValor(2,40);">40</span>


<input type="text" name="campo1" id="campo1" >
<input type="text" name="campo2" id="campo2" >

<input type="button" onclick="calcular();" value="calcular" >

El resultado es: <span id="resultado"></span>
<script>

function agregarValor(campo, valor){
document.getElementById('campo'+campo).value= valor;
}

function calcular(){
var campo1 = 1* document.getElementById('campo1').value;
var campo2 = 1* document.getElementById('campo2').value;
document.getElementById('resultado').innerHTML = campo1 + campo2;
}
</script>

xluchex · #17 (**permalink**) 09/02/2011, 18:23

GENIAL!!!

muchas GRACIAS nox_gdl y tambien a ti caricatos Funciona de maravilla me salvaron... un saludo desde las alturas de La Paz - Bolvia. chau