rails 3 - 添加一个不会提交表单的按钮答案

【问题标题】：rails 3 - Add a Button that won't submit a formrails 3 - 添加一个不会提交表单的按钮
【发布时间】：2012-10-24 11:02:15
【问题描述】：

我正在尝试在表单中添加一些“下一步”和“返回”按钮。想法是将填写过程分为几个步骤，并使用这些按钮，当前步骤的 div 被隐藏，下一个相应。显示上一步。

我的问题是当我按以下方式添加按钮时......

<button class="proceed_button" id="loan_information">Proceed</button>
<button class="cancel_button" id="loan_information">Cancel</button>

...他们提交表单。表单标签内的每个按钮都被认为是提交按钮吗？如果是这样，我该如何改变这种行为？如果不是，那他们为什么要这么做？

【问题讨论】：

标签： forms ruby-on-rails-3.2

【解决方案1】：

我不确定你是否想要一个按钮，也许你想让它看起来像一个按钮。无论哪种方式，请参考这篇文章：rails 3: display link as button?

一旦你有了你的按钮，你需要更新你的 javascript 以防止在点击它时发生任何事情（假设你有 jquery）。为那些没有 js 的恐龙提供一个真正的后备仍然很好，所以假设你的继续按钮为没有 js 的用户提交，对于那些有 js 的用户，你会做这样的事情：

$('#proceed_button').click(function(e) { e.preventDefault(); // Show and hide your divs here });

另请注意，在您发布的代码中，您不应有两个具有相同 id 的按钮，您的 id 和类看起来交换了。

【讨论】：

感谢您的回答。我找到了解决方案，这很容易。因为我的声望点有限，所以在知道之前我无法添加它。我现在将添加它。感谢您提供有关 id 和类的建议。
id 和类交换的想法是所有的继续按钮在 onClick 上获得相同的功能，并找出这些按钮中的哪个被单击（或者它在哪个步骤中，要更准确）我使用 $(this).attr('id') 访问 id。所有具有相同班级的人都会收到相同的行为。我一直认为 ID 在某种程度上是上课的“孩子”。班级号。你知道我的意思吗？
这是不正确的，id 应该是唯一的，类可以共享。重复 id 的 html 和 xhtml 都是无效的。 w3schools.com/tags/att_global_id.asp您可以轻松地使用 jquery 使用类名 - $('.className').click()

【解决方案2】：

好的，解决方法是按钮需要一个类型。

<button type="button" class="proceed_button" id="loan_information">Proceed</button>
<button type="button" class="cancel_button" id="loan_information">Cancel</button>

这样，它不会再提交表单了。

根据http://w3schools.com/html5/att_button_type.asp，默认类型取决于浏览器，因此您应该始终指定类型。

【讨论】：