如何通过单击Rails上的ruby上的图像来创建类别

Question

I want to create search by clicking on a category. I have this code which works

<%= search_form_for @q , id: 'myform' , :html => {:class => "form-inline"} do |f| %>

   <%= f.text_field :category_id_eq, value: 1, type: 'hidden' %>
    <%= content_tag(:button, "Foo", :type=>:submit) do %>
    <div class="col-sm-3  ">
      Image goes here
      </div>
<% end %> <% end %>

but the button is not the image I want. It is just a big ugly button. Therefore I want to do something like this. Bt it does not work.

    <%= search_form_for @q , id: 'myform' , :html => {:class => "form-inline"} do |f| %>

       <%= f.text_field :category_id_eq, value: 1, type: 'hidden' %>
       <div class="col-sm-3  " onclick="document.myform.submit()">
       Image goes here
      </div>
    <% end %><% end %>

My question exactly is, how do I turn a div into a submit button? or how can I search by clicking on an image.

Thanks.

Answer 1

This is the way I solved the problem. The Use the first example which was correct and I simply style it with css.

<%= search_form_for @q , id: 'myform' , :html => {:class => "form-inline"} do |f| %>

  <%= f.text_field :category_id_eq, value: 1, type: 'hidden' %>
  <%= content_tag(:button, "Foo", :type=>:submit, class: 'category_button' ) do %>
    <div class="col-sm-3  ">
       Image goes here
    </div>
   <% end %> 
 <% end %>

CSS I reset Code:

 .category_button{
    background: none repeat scroll 0 0 transparent;
    margin: 0;
    padding: 0;
    border: none;
    display: inline-block;
    height: 0px;
    width: 0px;


   }