'How can I make a span clickable?

I have this code:

    <span class="glyphicon glyphicon-search"></span>
    @Html.TextBox("text", Model.Search.text, new {placeholder = Html.T("Поиск"), @class = "form-control"})

and as a result this one:

search panel

It's work fine if user type some text and press Enter. Search work fine. But the "search" button not works. It's just stay and not clickable. How do I make "search" button clickable without losing appearance?



Solution 1:[1]

Just add an id to the span element, and then in a js file attach an event to that id when you click it, and when that happens trigger the funcionality.

Example <span class="glyphicon glyphicon-search" id = "icon"></span>

$(document).ready(function(){
  
  $("#icon").click(function(){
    
    alert("Hi");
  
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="glyphicon glyphicon-search" id = "icon">Hello, click me!</span>

Solution 2:[2]

Try this :

$this->validate($request, [
           'name' => 'required|string|exists:products,name',
       ]);

I hope this works!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 FlokiTheFisherman
Solution 2 Dimitri McDaniel