0

I have a text input box and some links on a webpage. When I click on one of the links, I want to set the text of the search box to whatever the link text is. How do I do this? I have jQuery as well. I can't change the way the function executes though. I have to keep it as "href=javascript:".

function setText(this) {
        $("#searchBox").val(this);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchBox">
    
    <a class="link" href="javascript:setText(this)">Example 1</a>
    <a class="link" href="javascript:setText(this)">Example 2</a>
    <a class="link" href="javascript:setText(this)">Example 3</a>
    <a class="link" href="javascript:setText(this)">Example 4</a>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Pogo Pistachio
  • 5
  • 3

5 Answers5

0

First, the href in your links should just be set to the URL where you want to navigate to. Using javascript:... inline with your HTML is a 25+ year old technique that isn't used in modern coding.

Your event handlers should be set up in JavaScript, not inline with your HTML and while I'll show you how to accomplish the main effect with JQuery, this is hardly a reason to use JQuery, as this is a quite trivial thing to do without it.

// Set up an event listener on the document (or any ancestor
// of the individual items that might trigger the event)
document.addEventListener("click", setText);

// All event handlers are automatically passed
// a reference to the event they are handling
function setText(event) {
  // Check to see if the event was triggered by one of the links
  if(event.target.classList.contains("link")){
    // Set the value of the input to the text of the element that was clicked
    $("#searchBox").val($(event.target).text());                             // JQuery
    //document.getElementById("searchBox").value = event.target.textContent; // Vanilla JavaScript
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchBox">
    
<a class="link" href="#">Example 1</a>
<a class="link" href="#">Example 2</a>
<a class="link" href="#">Example 3</a>
<a class="link" href="#">Example 4</a>

And, if you are not actually navigating anywhere when the links are clicked, then you shouldn't be using hyperlinks in the first place - they are only for navigation and if you don't use them for that, it can cause accessibility problems. If this is the case, just replace them with an inline element like span (the rest of the code will still work as it is).

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

The functions is executed wrong way and passed a wrong parameter, You can use the following even you left the "href"

$('.link').on('click', function() {
     $('#searchBox').val($(this).text());
});
Ibrahim El Hajj
  • 26
  • 3
0

You can do it using onclick event handlers:

$(".link").on("click", function() {
  $("#searchBox").val(this.innerText)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchBox">
    
    <a href="javascript:" class="link">Example 1</a>
    <a href="javascript:" class="link">Example 2</a>
    <a href="javascript:" class="link">Example 3</a>
    <a href="javascript:" class="link">Example 4</a>
Anis R.
  • 6,656
  • 2
  • 15
  • 37
0

This is how you can do it. You can either use # or javascript:void(0) for your link to avoid adding # to your URL.

$(function(){
      function setText() {
            $("#searchBox").val($(this).text());
            return false;
      }
  $('a.link').click(setText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchBox">

<a class="link" href="#">Click Me 1</a>
<a class="link" href="javascript:void(0)">Click Me 2</a>
Evik Ghazarian
  • 1,803
  • 1
  • 9
  • 24
  • `javascript:void(0)`? It's not 1998! – Scott Marcus Aug 27 '20 at 21:49
  • Why do you copy and paste the same comment on every answer that have `javascript:void(0)`. Yes! I still use `javascript:void(0)` since I don't like `#` to be added to my URL. I offered both `#` and `javascript:void(0)`. OP learning more doesn't hurt anybody. – Evik Ghazarian Aug 27 '20 at 21:52
  • Because it's really bad coding and I'm here to help people understand better ways to do things. But, because you showed a way to not use that, I only made a comment. I didn't down vote. The correct way to do it is what I posted in my answer, which is not to use a hyperlink when you aren't actually navigating and to use a `span` instead. Then you don't need `#` or `javascript:void(0)`. – Scott Marcus Aug 27 '20 at 22:24
-1

You can do it like with the code below

    <input type="text" id="searchBox">

    <a class="link" href="javascript:void(0)">Example 1</a>    
    <a class="link" href="javascript:void(0)">Example 2</a>
    <a class="link" href="javascript:void(0)">Example 3</a>
    <a class="link" href="javascript:void(0)">Example 4</a>

    <script>
    $(".link").on("click",function(){
        $("#searchBox").val($(this).text());
    });
    </script>
Emin Uzun
  • 99
  • 6