search icon with form element inside input box

Question

I am trying to add search image inside search box with form element.

My code is

<div class="col-xs-9">
    <form action="search">
        <input class="form-control" type="search" />
        <span class="glyphicon glyphicon-search"></span>
        <button type="submit" class="btn"><i class="glyphicon glyphicon-search"></i>
        </button>
    </form>
</div>

I want when user click on the search image inside search box form action should call code is http://jsfiddle.net/chetfarley/WK3Q6/1/

Trying code from https://stackoverflow.com/a/19918345/876739

Answer 1

You can do it like this:

HTML:

<div class="col-xs-9">
  <input class="form-control" type="search" />
  <button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>

CSS:

.form-control + button  {
    position: absolute;
    right: 20px;
    top: 7px;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

And a little event listener, you won't need if you just want the form to be submited:

document.getElementsByTagName("button")[0].addEventListener("click", function(){
    alert("doing");
});

Here is the demo: http://jsfiddle.net/WK3Q6/275/