0

I am using a website template which has a search form with an icon in the text field. Search icon

When a value is entered and the user clicks on 'Enter' the form is executed. However, when the search icon is clicked, nothing happens.

Nothing happens when clicking the icon

The icon is created via the awesome font library http://fontawesome.io/ and added via css

content: '\f002';

Here is a fiddle with the code: https://jsfiddle.net/BamBamm/df2gzkbb/10/

How can I fix this? Thank you.

#search form {
 text-decoration: none;
 position: relative;
}

#search form:before {
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 text-transform: none !important;
}

#search form:before {
 -moz-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
 -ms-transform: scaleX(-1);
 transform: scaleX(-1);
 color: #7f888f;
 content: '\f002';
 cursor: default;
 display: block;
 font-size: 1.5em;
 height: 2em;
 line-height: 2em;
 opacity: 0.325;
 position: absolute;
 right: 0;
 text-align: center;
 top: 0;
 width: 2em;
}
    
input[type="text"] {
    height: 2.75em;
}

input[type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: #ffffff;
    border-radius: 0.375em;
    border: none;
    border: solid 1px rgba(210, 215, 217, 0.75);
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
}

body, input, select, textarea {
    color: #7f888f;
    font-family: "Open Sans", sans-serif;
    font-size: 13pt;
    font-weight: 400;
    line-height: 1.65;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="search" class="alt">
 <form action="javascript:alert('Inner Function performed!');">
   <input type="text" name="search_query" value="defaultValue"/>
  </form>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
IPV3001
  • 272
  • 3
  • 16
  • 2
    Why would anything happen when you click on the icon? Only expected functionality is to focus the search field. Just because it is a magnifying glass, the browser does not magically know it has to search when it is clicked. You can make a button outside the search field and have that submit the form. – mplungjan Jan 03 '18 at 10:32
  • There is no code to be executed when click the icon, you will need some javascript... Enter is working because it's the normal behavior to a form. – Calvin Nunes Jan 03 '18 at 10:33
  • if you use `font-awesome` as it's documented on their website (in an HTML tag not CSS), then you could add an `onclick` to the tag easily. – Omar Einea Jan 03 '18 at 10:33
  • @CalvinNunes You cannot attach an event handler to a pseudo element because it is not in the DOM. – connexo Jan 03 '18 at 10:34
  • @connexo, I know that, but if he wants to have a click event, he'll need to create an element to put this icon inside, like this: https://stackoverflow.com/questions/35185974/font-awesome-icon-with-an-onclick-event-set – Calvin Nunes Jan 03 '18 at 10:35

4 Answers4

4

You can give icon on submit button

Please Check that code : 

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<div class="container">
<div class="col-md-3">
  <form class="navbar-form" role="search" action="javascript:alert('Inner Function performed!');">
    <div class="input-group add-on">
      <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
      
</div>
</div>
Nims Patel
  • 1,048
  • 9
  • 19
  • Wow, adding a full-blown CSS library for your solution only because you don't seem to know how to add fontawesome icons otherwise. That's like buying a library of books when all you need is a word. – connexo Jan 03 '18 at 11:06
1

Instead of putting the icon on a pseudo element in the form, you can add a submit button that has the same icon:

https://jsfiddle.net/df2gzkbb/12/

Even though this works, I would recommend you do not change the behaviour at all. Sending the form via clicking of the icon in my opinion would be unexpected behaviour and thus, worsen the user experience.

#search form {
  text-decoration: none;
  position: relative;
}

#search form button {
  font-size: 0;
  position: absolute;
  right: 0;
  top: 8px;
  background-color: transparent;
  border: 0;
  appearance: none;
}

#search form button:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  color: #7f888f;
  content: '\f002';
  cursor: default;
  display: block;
  font-size: 1.5rem;
  height: 2rem;
  line-height: 2rem;
  opacity: 0.325;
  text-align: center;
  width: 2rem;
}

input[type="text"] {
  height: 2.75em;
}

input[type="text"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: #ffffff;
  border-radius: 0.375em;
  border: none;
  border: solid 1px rgba(210, 215, 217, 0.75);
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
}

body,
input,
select,
textarea {
  color: #7f888f;
  font-family: "Open Sans", sans-serif;
  font-size: 13pt;
  font-weight: 400;
  line-height: 1.65;
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css " />
<div id="search" class="alt">
  <form action="javascript:alert('Inner Function performed!');">
    <input type="text" name="search_query" value="defaultValue" />
    <button type="submit">Search</button>
  </form>
</div>
connexo
  • 53,704
  • 14
  • 91
  • 128
1

Add a span to the DOM and add an event to it :

$('#glyphicon').click(function(){
  $('#myform').submit()
})
#glyphicon {
    position: relative;
    left: -25px;
    top: 6px;
    background-image: url(http://wfarm4.dataknet.com/static/resources/icons/set110/37275f5a.png);
    background-size : 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search" class="alt">
 <form id="myform" action="javascript:alert('Inner Function performed!');">
   <input type="text" name="search_query" value="defaultValue"/>
    <span id="glyphicon">
  
    </span>
  </form>
</div>
Mehdi Souregi
  • 3,153
  • 5
  • 36
  • 53
  • Why use a `span` + jQuery when a simple `` does the job? – connexo Jan 03 '18 at 10:46
  • I dont love the submit button, I always love to control over what happen when I click on something, perhaps I want to do something else before or submiting ( maybe on the future? ) to the server. – Mehdi Souregi Jan 03 '18 at 11:03
  • Then simply attach an event handler to the submit button. No single valid reason for a span over a button from your side so far. – connexo Jan 03 '18 at 11:04
  • If you want my personal opinion , I try to avoid submit button and form tag as well, and as I said I try to do everything by myself. It is my personal opinion, I like to do everything by my self, no need to let a button do the job that i am supposed to do. – Mehdi Souregi Jan 03 '18 at 11:09
  • Actually the opposite is the case. No need to do it yourself when there is a semantically appropriate element that does exactly what is expected. You really need to take a deep dive into semantics, and why that matters **alot**. – connexo Jan 03 '18 at 11:16
1

Set an event for the onclick of the search button. The code should be something like this

<div onclick="myFunction()">
       <i class="fa fa-minus-circle"></i>
</div>

The form takes in the Enter key stroke as a submit. You have to set an event for mouse click events.

L11
  • 187
  • 2
  • 15