'Click image to initiate a search in Rails

I have placed an image of a magnifying glass within a text box so that the user can click this to initiate their search. At the moment if you press 'Enter' the search function is carried out, but need a click event also.

This is my HTML and CSS as it is:

<form accept-charset="UTF-8" action="/blog" class="searchPosts" method="get">
  <input id="search" name="search" placeholder="Search Here" type="text" />      
</form>


.searchPosts {
  background:url("/assets/bg_dots_grey.png") repeat;
}

#search {
 background:url('/assets/search.png') no-repeat right;
 padding-right:0px;
}

The Ruby to produce the form:

<%= form_tag blog_path, :method => 'get', :class => 'searchPosts'  do %>
  <%= text_field_tag :search, params[:search], :placeholder => 'Search Here' %>
<% end %>

Notice there is no submit_tag as I did not want the user to click a button to carry out the request.

Do I need to add the submit_tag back in and style that with CSS to fit within the input field? Or is this a case for a jQuery solution? If not how would I go about this?

jquerycssruby-on-railsrubyforms


Solution 1:[1]

Right now, all you have in your form is an image inside the text box via css's background property. This will not accept a click event. Create a submit button and style it with your "magnifying glass" properties instead of the standard button properties.

Placing the button inside the text field is just a matter of relative positioning in css. Do a search for more details on that.

Having <button type="submit" class="magGlass"></button> will allow it to be clicked and fire the submit event.

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 James_1x0

Related Questions