Loading link on the same page, no refresh!

Asked

Viewed 1,674 times

0

You guys, good night

I need some help for something that seems to be very simple but I haven’t found anything on the net that can be applied. Well, come on:

I need the contents of a link to be displayed in an input field on the same page, without refresh!

Simply put, the code of the page:

<!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>

jquery html ajax link
  • 1

    This link is in the same domain as the page or is in another domain?

  • in the same domain... will be within the same folder including!

  • Just to make sure what you want: do you want to upload the contents of a file or the value of the link only? and that you want to put inside an input or another part of the page?

1 answer

1


This can be done using Javascript. I don’t know what your degree of knowledge is with Javascript but I’m the kind of guy who likes to explain piece by piece :D

jQuery

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

The above code creates an event of the type click in all tags <a> of the page (I don’t really recommend it, because the right one would be you create a ID for anchors from which content will be added to the attribute value tag <input>).

When the user clicks on the anchor, the event will search for all page inputs and add the attribute value corresponding to the value of $(this) anchor.

HTML

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

I don’t want to be a pain in the ass about this, but you tagged me <input> out of <body> That’s not good practice.

If you want take a look at this link https://jsfiddle.net/iszwnc/1s1t6sko/ to see the code above running.

Update

I made this modification using Classes. Why? Well I imagine you want to get the value of an anchor group right? Using ID you violate a unitary concept (let’s say so).

How so unitary?

To ID is a type of single selector, which cannot be repeated from your statement, in other words if you define a ID to the Value 1 you will not be able to repeat it on Value 2.

That’s where the Classes, with this dial you can repeat endlessly at different times tags without violating such a concept.

Recalling that this term "unitary" is not explicitly documented by W3C, I only used it for teaching purposes.

  • Show! Excellent... One last question: how would I put an ID on the anchors? I really have other links on the page but I wouldn’t like them to produce that effect! Thank you.

  • My Friend, you didn’t ride here on Dreamweaver! See: <!DOCTYPE html> <html> <head> <title>Example</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 run in Safari (Macbook)!

  • @Felipe you have to set the tag <script> at the end of the document before the closing of </body>.

  • So? Tb did not run: <! DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <a href="#" class="your-class">Valor1</a> <a href="#" class="your-class">Valor2</a> <input type="text"> <type="/javascript"> $('.your-class'). click(Function() { $('input'). attr('value', $(this).text(); }); </script> </body> </html>

  • @Felipe you are importing the library jQuery?

  • No, how do you do it?

  • Add that <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> before <script type="text/javascript"> $('.your-class').click(function () { $('input').attr('value', $(this).text()); }); </script>.

  • Bad boy, solved all the problems! Big abs...

  • Take a look too at that link which explains why we put the <script> at the end of the page.

  • how do I put an ID in text and just replace the value in that input field? I also need something else: when you click on Valor1, the text needs to be changed in color. If the user then clicks Value2, the color of the Value1 field returns to normal and the color of Value2 is changed. It is possible?

  • I don’t quite understand...

  • next: I need only a single <input> field to be changed as soon as I click on the links. The case is that I have several text fields in the form and this is getting in the way. What would the code look like below? HTML: <body> <a href="#" class="your-class">Valor1</a> <a href="#" class="your-class">Valor2</a> <input type="text"> </body> JS: $('. your-class'). click(Function() { $('input'). attr('value', $(this). text(); });

  • @Felipe take a look at the code that’s already on Jsfiddle with the change you asked me, I hope I helped. Hug!

  • You are the man! Already abusing: I would like one last adjustment: instead of being informed the text "Valor1" of the <a href="#" class="your-class">Valor1</a>, would it be possible to inform a value through a field inside the input ("correct value")? It would look like this: <a href="#" class="your-class" value="correct value">Valor1</a>

  • @Felipe is ready! I would have used the attribute name but according to the recommendations of Mozilla https://developer.mozilla.org/en/docs/Web/HTML/Element/a. this attribute is obsolete as of version 5 of HTML.

Show 10 more comments

Browser other questions tagged jquery html ajax link

You are not signed in. Login or sign up in order to post.