Добавление изображения кнопки отправки в форму Rails

Question

Я создаю форму в Rails для отправки комментариев и хочу, чтобы кнопка отправки была изображением, а не кнопкой HTML. В этом фрагменте документации написано, что код image_submit_tag, но я не могу заставить его работать в моем коде.

Вот с чем я работаю:

<% form_for [@post, Comment.new], :remote => true do |f| %>
<p>
    <%= f.label :body, "Add a comment" %><br />
    Name <%= f.text_field :name %><br />
    Website<%= f.text_field :website %><br />
    Twitter<%= f.text_field :twitter %><br />
    <%= f.text_area :body %>
</p>
<div id="comment-form">

    <div id="comment-button"><p>
        <%= f.image_submit_tag("comment-button.png") %></p>
        </div>
</div>
<% end %>

Спасибо за помощь.

Answer 1

Я просто упал на это, пытаясь решить ту же проблему.Внезапная мысль заставила меня попробовать что-то вроде этого:

<%= f.submit "Comment", :type => :image, :src => "/images/comment-button.png" %>

Создаст что-то вроде этого:

<input id="comment_submit" name="commit" src="/images/comment-button.png" type="image" value="Comment" />

Попробуйте: -)

Answer 2

Я считаю, что методы 'tag' не могут быть вызваны для объекта построителя форм.

Методами 'tag' я имею в виду вещи из модуля ActionView :: Helpers :: FormTagHelper.

Это должно работать, если вы делаете:

<div id="comment-button"><p>
  <%= image_submit_tag("comment-button.png") %></p>
</div>

Answer 3

Вы можете сделать это так:

ERB:

<%= f.submit "" %>

CSS:

input[type="submit"]
{
  background:url(mybutton.png);
}

Answer 4

Да, должно работать следующее:

  <%= image_submit_tag("comment-button.png") %></p>

http://apidock.com/rails/ActionView/Helpers/FormTagHelper/image_submit_tag

Answer 5

Работая на примере Zabba, более доступным решением будет:

View:

<%= f.submit "Submit" %>

CSS:

input[type="submit"]
{
  background:url(mybutton.png);
  text-indent: -9999em;
}

Answer 6

Пожалуйста, используйте delete on line:

<%= f.image_submit_tag("/assets/icon-search.png") %>

изменить на:

<%= image_submit_tag("/assets/icon-search.png") %>

подробнее о image_submit_tag

Answer 7

Для рельсов 3.1 и выше

<%= f.submit "Submit", :type => :image, :src => image_path("submit.png") %>

Answer 8

Вы можете использовать следующий трюк JS.

1) В вашем application.js:

function submitFormWithoutButton(formId) {
  document.getElementById(formId).submit(); 
}

2) Затем в вашей форме замените f.submit строку (и) на:

<%= link_to "#", onclick: "submitFormWithoutButton('ID_OF_YOUR_FORM')" do %>
  <%=  image_tag("PATH_TO_YOUR_AWESOME_ICON") %>
<% end %>

3) Требуется только заменить заглавные метки-заполнители на идентификатор вашей формы и путь к файлу изображения, который вы хотите использовать в качестве кнопки.

Теперь вы можете отправлять свои формы с помощью приятных и послушных ссылок вместо упрямых и хитрых кнопок!

Не забудьте проголосовать, если это поможет!