在向导表单中使用按钮提交值的最佳方式

Best way to submit a value with a button in a wizard form

本文关键字：提交 最佳 方式 按钮 向导 表单      更新时间：2024-02-06

我一直在尝试创建一个向导表单，它基本上是一系列"是"或"否"问题。表单中还有几个页面，用户在继续操作之前必须选择多个选项。

现在，所有的对象参数大多是布尔值，但我看到的所有向导示例都涉及基本形式（text_fields、check_box等）

我想我可能会做这样的事情：

<div class="button1">
    <%= f.hidden_field :newsletter, value: "1" %>
    <%= f.submit "Yes" %>
</div>
<div class="button2">
    <%= f.hidden_field :newsletter, value: "0" %>
    <%= f.submit "No" %>
</div>

但这似乎并没有节省价值。我正在为向导使用邪恶的宝石，并遵循这个RailsCast教程

注意：像text_fields这样的普通字段保存，只是不保存这些按钮布尔值。

这两个按钮和隐藏字段都在同一个表单中。因此，任何一个按钮都会提交表单，当表单提交时，它会将所有字段的值收集到params中。

您可以做的是将按钮本身作为输入，通过参数发送。这是通过"名称"answers"值"属性完成的，就像任何其他属性一样：

<input type="submit" value="foo" name="bar" />
<input type="submit" value="chunky" name="bacon" />

现在，如果你用第一个按钮提交，你会在params中得到:bar => "foo"，如果用第二个按钮提交你会得到:bacon => "chunky"。

传统名称是"提交"。当您使用rails submit_tag时，它会将"name"设置为"commit"，并将"value"设置为按钮的文本。因此，您应该在params中看到:commit => "Yes"或:commit => "No"，并相应地更改您的逻辑。

最好使用jQuery来触发事件，并相应地添加隐藏的输入

<div class="button1">
  <%= f.submit "Yes", class: "wizard-btn" %>
</div>
<div class="button2">
  <%= f.submit "No", class: "wizard-btn" %>
</div>
... ...

示例coffeescript代码如下所示：

jQuery ->
  $(".wizard-btn").on "click", (e) ->
    e.preventDefault()
    thisForm = $(".wizard-form")
    hideDiv = "<input type='"hidden'" name='"newsletter'" />"
    if $(this).val() == "Yes"
      thisForm.append $(hideDiv).val("1")
    else if $(this).val() == "No"
      thisForm.append $(hideDiv).val("0")
    thisForm.get(0).submit()

其中，我假设您的表单具有名为wizard-form 的类

相关文章：