在 Haml 和 partials 中使用多部分形式

Using multi-part form with Haml and partials

我有一个分为两部分的表格(第二部分显示取决于用户的第一选择)。请注意,第二部分是部分的。这两个部分必须发送到同一个控制器。 使用 Haml,如何仅使用一个提交按钮就可以将所有参数发送到控制器?

ps : 我在这里使用 form_tag

Main file 
= form_tag({url: users_search_path}, id:'form1') do
    label
      = radio_button_tag 'user_type', 'Requestor', false, id: "radio-requestor"
      = label_tag 'radio-requestor', "Demandeur"
    label
      = radio_button_tag 'user_type', 'Contributor', false, id: "radio-contributor"
      = label_tag 'radio-contributor', 'Contributeur

.contributor_form
  = render partial: 'contributor_search_form'

.requestor_form.hidden
  = render partial: 'requestor_search_form'

----------------------------------------------

2nd part (partial contributor_search_form)

= form_tag({url: users_search_path}, id:"form2") do 
    label
      = check_box_tag 'prof', 'prof', false, id: 'prof'
      = label_tag 'prof', 'Prof'
    label
      = check_box_tag 'ticket', 'ticket', false, id: 'ticket'
      = label_tag 'ticket', "Ticket"
     = submit_tag "Afficher les résultats"
  • 如果您想一键提交所有内容,请不要使用 2 form_tag
  • 如果你想在没有服务器的情况下根据用户交互改变视图,你必须通过 Javascript

正如我猜测的那样,您希望控制器中接收的参数看起来像

{
  user_type: "Requestor",
  prof: true,
  ticket: false
}

所以你可以在没有 form_tag 的情况下编写你的部分

# contributor_search_form
label
  = check_box_tag 'prof', 'prof', false, id: 'prof'
  = label_tag 'prof', 'Prof'
label
  = check_box_tag 'ticket', 'ticket', false, id: 'ticket'
  = label_tag 'ticket', "Ticket"
 = submit_tag "Afficher les résultats"

你的主文件正在渲染局部视图

# Main file
= form_tag({url: users_search_path}, id:'form1') do
  label
    = radio_button_tag 'user_type', 'Requestor', false, id: "radio-requestor"
    = label_tag 'radio-requestor', "Demandeur"
  label
    = radio_button_tag 'user_type', 'Contributor', true, id: "radio-contributor"
    = label_tag 'radio-contributor', 'Contributeur
  .contributor_form
    = render partial: 'contributor_search_form'
  .requestor_form.hidden
    = render partial: 'requestor_search_form'

注意部分表单已经渲染主表单中

现在写一些 Javascript 和 jQuery

  • 当用户 select Requestor 时,显示 .requestor_form 反之亦然 Contributor
  • 仅在显示区域内提交字段,隐藏时必须禁用字段。

这是一个例子

function toggleFormPartial (target, isShow) {
  if (isShow) {
    target.removeClass("hidden")
    // Remove `disabled` attribute for fields within `target`
  } else {
    target.addClass("hidden")
    // Add `disabled` attribute for fields within `target`
  }
}

$("#radio-requestor").change(function (e) {
  toggleFormPartial($(".requestor_form"), e.val())
})
$("#radio-contributor").change(function (e) {
  toggleFormPartial($(".contributor_form"), e.val())
})