0

Galera, boa noite

Preciso de uma ajuda para algo que parece ser muito simples porém não encontrei nada na net que possa ser aplicado. Bom, vamos lá:

Preciso que o conteúdo de um link seja mostrado num campo input na mesma página, sem refresh!

De forma simples, o código da página:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title> 
</head>
<body>    
     <a href="#">Valor1</a>
     <a href="#">Valor2</a>
</body>

<input type="text" value="<?php echo "Escrever o valor do link que foi clicado!"?>">

</html>

3
  • 1
    Esse link está no mesmo domínio que a página ou está noutro dominio?
    – Sergio
    Commented 17/07/2016 às 21:20
  • no mesmo domínio... vai estar dentro da mesma pasta inclusive!
    – Felipe
    Commented 17/07/2016 às 21:37
  • Só para ter a certeza do que queres: queres carregar o conteúdo de um ficheiro ou o valor do link somente? e isso queres colocar dentro de um input ou de outra parte da página?
    – Sergio
    Commented 17/07/2016 às 21:46

1 Resposta 1

1

Isso pode ser feito utilizando JavaScript. Eu não sei qual é seu grau de conhecimento com JavaScript porém eu sou do tipo de cara que gosta de explicar pedaço por pedaço :D

jQuery

$('a').click(function () {
  $('input').attr('value', $(this).text());
});

O código acima cria um evento do tipo click em todas as tags <a> da página (eu não realidade não recomendo isso, pois o certo seria você criar uma ID para as âncoras da qual o conteúdo será adicionado ao atributo value da tag <input>).

Quando o usuário clicar na âncora, o evento procurará por todos os inputs da página e adicionará o atributo value correspondente ao valor de $(this) da âncora.

HTML

<body>    
  <a href="#">Valor1</a>
  <a href="#">Valor2</a>
  <input type="text">
</body>

Não quero ser chato com isso mas você colocou a tag <input> fora de <body> isso não é uma boa prática.

Se você quiser dê uma olhada neste link https://jsfiddle.net/iszwnc/1s1t6sko/ para ver o código acima rodando.

Update

Eu fiz essa modificação utilizando Classes. Por quê? Bom eu imagino que você queira pegar o valor de um grupo de âncoras certo? Utilizando ID você viola um conceito unitário (digamos assim).

Como assim unitário?

A ID é um tipo de seletor único, que não pode ser repetido a partir da sua declaração, em outras palavras se você definir uma ID para o Valor 1 você não poderá repeti-la no Valor 2.

É ai que entram as Classes, com este seletor você consegue repetir infinitas vezes em diferentes tags sem violar tal conceito.

Lembrando que este termo "unitário" não é explicitamente documentado pela W3C, eu apenas a utilizei para fins didáticos.

15
  • Show! Excelente... Uma última dúvida: como eu faria para colocar um ID nas âncoras? Realmente tenho outros links na página mas não gostaria que produzissem esse efeito! Obrigado.
    – Felipe
    Commented 17/07/2016 às 22:01
  • My friend, não rodou aqui no dreamweaver! Veja: <!DOCTYPE html> <html> <head> <title>Exemplo</title> <script type="text/javascript"> $('.your-class').click(function () { $('input').attr('value', $(this).text()); }); </script> </head> <body> <a href="#" class="your-class">Valor1</a> <a href="#" class="your-class">Valor2</a> <input type="text"> </body> </html> To rodando no Safari (Macbook)!
    – Felipe
    Commented 17/07/2016 às 22:55
  • @Felipe você tem que definir a tag <script> no final do documento antes do fechamento de </body>.
    – iszwnc
    Commented 17/07/2016 às 22:58
  • Assim? Tb nao rodou: <!DOCTYPE html> <html> <head> <title>Exemplo</title> </head> <body> <a href="#" class="your-class">Valor1</a> <a href="#" class="your-class">Valor2</a> <input type="text"> <script type="text/javascript"> $('.your-class').click(function () { $('input').attr('value', $(this).text()); }); </script> </body> </html>
    – Felipe
    Commented 17/07/2016 às 23:00
  • @Felipe você está importando a biblioteca jQuery?
    – iszwnc
    Commented 17/07/2016 às 23:01

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .