Using multi-part form with Haml and partials

问题内容:

I have a form divided into two parts (the second part is displayed depending on user’s first choice). Note that the second part is in a partial. The two parts must be sent to the same controller.
Using Haml, how can I get all the parameters sent to the controller, using only one submit button ?

ps : I’m using form_tag here

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"

问题评论:

1  
Can you please share the code by which you’re rendering the second part of the form. Also, is there for_tag in the second part as well? Because its not required.
    
Thanks Aakanksha. I updated the code in my question. It must be only one big form in the end.
– romss182
2 hours ago
    
Have you tried indenting the contributor_form and requestor_form so it’s within the form_tag? Also remove form_tag from the partial.

答案:

答案1:

  • Don’t use 2 form_tag if you want to submit them all in 1 click.
  • If you want the view change base on user interaction without server, you have to do via Javascript

As I guess, you want the param receiving in the controller looks like

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

so you can write your partial without form_tag as

# 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"

And your main file with partial view being rendered

# 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'

Notice that the partial form has been rendered inside the main form

Now write some Javascript with jQuery

  • When user select Requestor, show .requestor_form and vice versa for Contributor
  • Only submit fields within the displayed zone, then you have to disable fields when hidden.

Here is an example

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())
})

答案评论:

    
thanks a lot yeuem1vannam !! that was so logic in fact ! the jQuery is nice, thanks!
– romss182
12 mins ago

原文地址:

https://stackoverflow.com/questions/47754282/using-multi-part-form-with-haml-and-partials

添加评论