使用链接而不是按钮提交Rails 4表单

Question

我看到一些类似的问题，但它们似乎是人为制造的，并且主要针对Rails的旧版本。

如何以锚标签（链接）而不是普通按钮提交表单的最简单方法是什么？

<%= f.submit 'Search', :class => "button expand"%>

如何以最简洁的方式（最佳实践）将其更改为提交链接？

- Chris Valentine

---

只是好奇，你为什么想这样做？无论如何，只需将处理程序添加到链接的单击事件中，即可提交表单。 - S. A.

只需将按钮样式设置为链接或使用一些Javascript提交表单即可。这不是特定于Rails的。 - tirdadc

我在一些地方看到这个问题被引用为一个问题，所以我只是好奇是否有一种Rails-way或帮助程序可以使它更简单，但根据答案，它只是使用JavaScript实现了期望的结果。 - Chris Valentine

Answer 1

我经常使用js/jquery来提交表单。如果提交按钮在表单外部或者有多个按钮可以提交同一个表单，这非常有用。

$(".submit-btn").click(function(event) {
  event.preventDefault();
  $("#form-id").submit();
});

event.preventDefault();可以防止默认的按钮/提交行为。

以下是我在Rails 4项目中使用的Coffeescript示例：

ready = ->
  if $("#form-id").length > 0
    $(".submit-btn").click (event) ->
      event.preventDefault()
      $("#form-id").submit()

$(document).ready ready
$(document).on "page:load", ready

请注意，这种方式可以将链接作为任何类型的元素 - 不一定是提交按钮。 您不必将提交按钮放在表单内部，但如果您这样做，则 preventDefault 将阻止默认的表单提交行为。

- Nicholas.V

---

似乎在Rails 5上无法正常工作，可能是由于表单真实性令牌的问题。 - jpw

Answer 2

提交

为了补充已经提供的答案，HTML表单必须使用提交按钮进行提交。

我不确定提交按钮相对于链接有什么特殊的特点 - 它基本上调用了submit操作，而链接不行 (info):

--

链接

这意味着如果你想用链接替换提交按钮，你实际上需要在你的应用程序中模拟submit方法。这可以通过JS (JQuery)完成：

#app/assets/javascripts/application.js
$(document).on("click", "#your_link", function(){
   $("#form").submit();
});

#app/views/controller/your_view.html.erb
<%= form_tag your_path, id: "form" do %>
    <%= link_to "Submit", your_path, id: "your_link" %>
<% end %>

- Richard Peck

Answer 3

这很简单：

然后：

<%= f.submit '', :class => "hidden", :id => 'form_submit_button' %>
content_tag(:a, 'Submit', :name => 'submit', :id => 'submit_link')

在JS中：

$(document).ready(function() {
    $(document).on("click","#submit_link",function() {
        $('#form_submit_button').click();
    });
});

我不确定确切的语法，因此可能会有一些语法错误。随时提供更多帮助。

- Abdul Baig

---

你不需要添加提交按钮并将其隐藏。只需根本不包括它即可。 - Hass

但我认为jQuery已经弃用了form.submit()操作。否则最好不要包含隐藏按钮。 - Abdul Baig

已弃用？你从哪里得到这个信息的？ - Hass

就像我说的，“我认为”，但不确定是从别人那里听到的。 - Abdul Baig

哦，好的，我查阅了文档，但没有提到那个问题。并不是有意冒犯。 - Hass