如何让这个`f.button`显示＆amp;以我想要的方式工作？

Question

在我的simple_form表单中，我有一个带有图标的按钮标记。

我想让我的表单像这样工作：

<button class="input-submit">
    <i class="icon-circle-right"></i>
</button>

看起来像这样：

但是，这是我的simple_form button块：

<%= f.button :submit, value: "card-#{node_counter}", id: "submit-card-#{node_counter}", class: "input-submit", data: { disable_with: "Submitting Comment..." } do %>
     <i class="icon-circle-right"></i>
<% end %>

我遇到的问题是我必须在我的按钮中使用value: "card-#node_counter"属性才能在我的AJAX表单中正常工作，但是一旦我指定value属性，我的HTML呈现像这样：

<input class="btn input-submit" data-disable-with="Submitting Comment..." id="submit-card-0" name="commit" type="submit" value="card-0">

然后看起来像这样：

当我使用默认f.button和我的simple_form_for时，表单按照我想要的方式工作 - 即通过AJAX并更新页面上的相应元素。

如果我尝试使用content_tag代替，那么表单不会因为某种原因而以AJAX方式提交，但它确实看起来像我想要的那样，而我想要的HTML看起来更接近我的理想。即如果我这样做：

    <%= content_tag(:button, '', name: :submit, value: "card-#{node_counter}", id: "submit-card-#{node_counter}", class: "input-submit", data: { disable_with: "Submitting Comment..." } ) do %>
        <i class="icon-circle-right"></i>
    <% end %>

它呈现：

<button class="input-submit" data-disable-with="Submitting Comment..." id="submit-card-0" name="submit" value="card-0">
            <i class="icon-circle-right"></i>
</button>

看起来像这样：

所以，总而言之......我无法同时获得我想要的外观和行为。想法？

Answer 1

好的我明白了。所以问题是我在提交表单后用来更新界面的JS期望params[:card_id]存在，并且如上所述我的content_tag我已经更改了{{1从name到card_id的属性....认为这会使我的表单提交。但这不是让它提交的原因。

所以我把它改成了：

:submit

现在这很有用。

来自我的控制器的位，万一你想知道的是：

    <%= content_tag(:button, '', name: "card_id", value: "card-#{node_counter}", id: "submit-card-#{node_counter}", class: "input-submit", data: { disable_with: "Submitting Comment..." } ) do %>
        <i class="icon-circle-right"></i>
    <% end %>

现在一切都在世界上固定下来。它的外观和功能都像我期望的那样。