jQuery and Javascript - Set text box value to the text inside a link on href click

Question

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>

Answer 1

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).

Answer 2

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());
});

Answer 3

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>

Answer 4

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>

Answer 5

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>