How can I make a span clickable?

Question

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:

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?

Answer 1

Add the onclick event. ( https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick )

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

myfunction can be the function that triggers the submit on your input.

Answer 2

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>

Answer 3

Try this :

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

I hope this works!