在Rails中使用link_to提交表单

Question

我试图使用link_to提交一个表单，代码如下：

 <%= form_for(@post,  :url=> '/post/action', :method=> 'post', :html => {:id=>'form_id'} ) do |f| %>
  ....

 <%= link_to 'submit', "/post/action", :onclick=>"document.getElementById('form_id').submit()" %>

  ....

但它并未提交表单，而只是将我的表单重定向到指定的URL。有没有人知道如何解决这个问题？

- random

Answer 1

您可以使用：

<%= link_to 'submit', "#", :onclick => "$('#form_id').submit()" %>

如果您正在使用JQuery和Rails的较新版本，上面的代码将起作用。但是，如果页面非常长，则由于“#”，它将导航到页面顶部。因此，如果您想避免这种情况，可以执行以下操作：

以上内容将适用于您的需要，但是如果您的页面非常长，由于 "#" 的原因会自动跳回页面顶部。若要避免此情况，您可以进行如下设置：

<%= link_to 'submit', "", :onclick => "$('#form_id').submit()" %>

- Paulo Fidalgo

---

谢谢你的回答！非常有帮助！但它没有传递表单数据，还有其他解决这个问题的方法吗？ - pangpang

@pangpang 确保你已经在控制器中允许了这些参数。 - Paulo Fidalgo

Answer 2

我认为两件事情都发生了。浏览器开始提交表单，但也遵循链接的 href 。您可以通过将链接指向#而不是/post/action来解决它...

然而，我不建议这样做。有一些更好的方法：

首先，您可以使用按钮代替链接。您需要对其进行样式设置以使其看起来像链接，但那应该不是问题。这将更好，因为它不会违反最小惊奇原则（阅读代码的人们期望使用按钮提交表单），并且您不需要JavaScript。

如果您坚持使用链接，则至少应将JavaScript代码从视图移到JavaScript文件中。然后以不显眼的方式添加此行为（尽管链接没有很好的回退）。假设您正在使用jQuery，那么它应该很简单：

$(document).on('click', '[data-submit-form]', function(e) {
  e.preventDefault();
  $(this).closest('form').submit()
}

- Stefan Kanev

---

使用按钮而不是链接是很好的建议。 - jpw

e.preventDefault(); 是一个很好的建议 ;) - Mauro

@StefanKanev，感谢您的贡献。我想知道[data-submit-form]是什么意思，希望您能澄清一下？ - BenKoshy

@BKSpurgeon 这样你就可以定义一个链接，例如 <a href='#' data-submit-form>submit</a>，它会自动找到链接并提交你的表单。 - bastianwegge