How to make an <i> tag an HREF on Bootstrap3?

Question

I'm working with Bootstrap version 3.3.4 and I'm trying to make a search form, however, in order to make my search glyphicon get inside my search bar I need to use an tag , here is the code I'm currently using:

<form id="searchform" method="get" action="/search/" class="navbar-form navbar-right">
        <div>
          <div class="right-inner-addon>
             <a href="#" onclick="document.getElementById('searchform').submit();" ><i class=" glyphicon glyphicon-search"></i></a>
              <input id="query" name="query" type="search" class="form-control searchbox" placeholder="Search" />
        </div>
      </div>
    </form>

As for Css I only use this costum apart, aside from all the bootstrap:

.searchbox {
    border-radius: 20px;
    height: 25px;
    margin-top: 5px;
}

Even though when clicking enter the search bar works, for some reason the glyphicon-search won't work as button so users also have the option on clicking on it to complete their search. Any ideas ? :S

Answer 1

You're missing a closing " after <div class="right-inner-addon>, which is causing the rest of your code to render improperly. Fix your code like this:

<form id="searchform" method="get" action="/search/" class="navbar-form navbar-right">
  <div>
    <div class="right-inner-addon">
      <a href="#" onclick="document.getElementById('searchform').submit();" ><i class=" glyphicon glyphicon-search"></i></a>
      <input id="query" name="query" type="search" class="form-control searchbox" placeholder="Search" />
    </div>
  </div>
</form>

And it works fine.

Check this Bootply.

Always try to use an IDE (Netbeans, Visual Studio, etc) with syntax highlighting; this issue would have been caught instantly.

Edit

Since using the icon in the search-bar negates the ability to click on it, I would suggest using a segmented button (as I can't figure out a way to capture the click event on the icon and not the input). Here would be the code:

<form id="searchform" method="get" action="/search/" class="navbar-form navbar-right">
  <div>
    <div class="input-group">
      <input class="form-control" placeholder="Search" type="text">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </span>
    </div>
  </div>
</form>

And another Bootply.