CODEWITHSUNDEEP
ruby-on-railsformshaml
romss182
romss182

Reputation: 203

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"

Upvotes: 1

Views: 442

Answers (1)

yeuem1vannam
yeuem1vannam

Reputation: 957

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

Upvotes: 1

Related Questions