使跨度元素提交编辑表单[重复]答案

【问题标题】：Make span element submit an edit form [duplicate]使跨度元素提交编辑表单[重复]
【发布时间】：2015-12-25 19:13:26
【问题描述】：

我有一个漂亮的引导式表单，看起来像（在 rails 和 HTML 中）

<%= form_for(current_user) do |f| %>
  <div class="input-group input-group-lg">
    <%= f.text_field :location, :class => "form-control", :placeholder => "Where are you?", 'aria-describedby' => 'basic-addon2' %>
    <span type="submit" name="commit" class="input-group-addon btn btn-success" id="basic-addon2" style="color: white;">Go!</span>
  </div>
<% end %>

但是使用上面的方法，当我点击“Go！”时实际上什么都没有发生。按钮。

如果我使用代码，我可以让我的表单成功提交：

<%= form_for(current_user) do |f| %>
  <div class="input-group input-group-lg">
    <%= f.text_field :location, :class => "form-control", :placeholder => "Where are you?", 'aria-describedby' => 'basic-addon2' %>
    <%= f.submit "Go!", class: "input-group-addon btn btn-success", id: "basic-addon2", style: "color: white;"  %>
  </div>
<% end %>

我的问题是我在合并两个版本时遇到了麻烦，即在保留前者的美感的同时添加后者的功能。我尝试在按钮中安排跨度或在跨度或其他奇怪的组合中安排按钮的每一种方式，都无法做到我想要的。我可以使<span> 和<button>（由f.submit 生成）的属性完全相同，我的浏览器看到的HTML 中唯一的区别是一个是<span>，另一个是@987654326 @。

谁能想出一种方法让我合并这两个概念？

【问题讨论】：

span 没有 type 或 name 属性。您不能随意交换 HTML 元素，并期望它们具有相同的功能……如果您追求的是某种 视觉外观，那么您应该使用适当的元素，并且通过 CSS 格式化。

标签： javascript html ruby-on-rails forms

【解决方案1】：

你看到你不能使用跨度或其他东西的链接，因为这个提交按钮通过浏览器作为发布方法工作。而链接进入get方法。但是任何元素都可以作为提交按钮使用的解决方案，只需按照此说明进行操作即可。Submit Rails 4 form with link instead of button

【讨论】：

如果是骗子，则使用指向骗子的链接标记为骗子。
不不，没关系……对不起。
不用担心；只是令人困惑:)

【解决方案2】：

当你点击span标签时，你总是可以触发submit事件：

# Inside your document.ready function in your .js file

$('#my_span').on('click', function() {
  $('#my_form').submit();
});

一种老生常谈的方法，但它确实有效。

【讨论】：

这不是hacky，这就是你的做法。