0

currently I am using fields_for to submit multiple forms (of the same object) with one submit button. Everything works fine except only one thing which is my radio buttons. Since fields_for create the same name group for all of my radio buttons, whenever I select a radio button, the values of radio buttons in other forms will be unselected. Therefore, now I want to create a unique/dynamic name for the radio buttons in each form. My approach is I want to create the variable index in the view, then, whenever I click the 'add_inquery' button, the index variable will be incremented by one. But the first problem right now is I don't know the syntax to assign for the name of radio button. The second problem, how can I use Jquery to update the index variable so that the radio buttons will get a unique name like, 

<input class="non_bco" name="radio_button_group_1" type="radio" value="false" id="pricing_history__bco_false">

<input class="non_bco" name="radio_button_group_2" type="radio" value="false" id="pricing_history__bco_false">

<input class="non_bco" name="radio_button_group_3" type="radio" value="false" id="pricing_history__bco_false">

Here are my files:

_form_body.html.haml:

%div.form-group.form-md-line-input
  %label.control-label.col-md-3
    = I18n.t('columns.customer_name')
    %span.required *
  %div.col-md-6
    = f.text_field :customer_name, placeholder: 'Customer Name', class: 'form-control'
    %div.form-control-focus
    %span.help-block Enter Customer Name
%div.form-group.form-md-line-input
  %label.control-label.col-md-3
    = I18n.t('columns.actual_customer')
    %span.required *
  %div.col-md-6
    = f.text_field :actual_customer, placeholder: 'Actual Customer', class: 'form-control actual_customer', disabled: true
    %div.form-control-focus
    %span.help-block Enter Actual Customer
%div.form-group.form-md-line-input
  %label.control-label.col-md-3
    = I18n.t('columns.bco')
    %span.required *
  .col-md-6
    .mt-radio-inline
      - index = 0
      %label.mt-radio
        = f.radio_button :bco, true, :checked => true, class: 'bco', name: 'radio_button_group_#{index}'
        = I18n.t('columns.bco_splited')
        %span
      %label.mt-radio
        = f.radio_button :bco, false, class: 'non_bco', name: 'radio_button_group_#{index}'
        = I18n.t('columns.non_bco_splited')
        %span
%div.form-group.form-md-line-input
  = f.label :trade_id, class: 'col-md-3 control-label' do
    = I18n.t('columns.trade')
    %span.required *
  %div.col-md-6
    = f.select :trade_id, options_for_select(Trade.all.map{|l| [l.name + '(' + l.code + ')', l.id]}, object.trade_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Trade
%div.form-group.form-md-line-input
  = f.label :trade_id, class: 'col-md-3 control-label' do
    = I18n.t('columns.sub_trade')
    %span.required *
  %div.col-md-6
    = f.select :sub_trade_id, options_for_select(SubTrade.all.map{|l| [l.name + '(' + l.code + ')', l.id]}, object.trade_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Sub Trade
%div.form-group.form-md-line-input
  = f.label :bound, class: 'col-md-3 control-label' do
    = I18n.t('columns.bound')
    %span.required *
  .col-md-6
    = f.select :bound, PricingHistory.get_bound_array,
      {}, {class: 'form-control select2_category'}
    %div.form-control-focus
    %span.help-block Enter Bound
%div.form-group.form-md-line-input
  = f.label :sales_week_id, class: 'col-md-3 control-label' do
    Sales Week
    %span.required *
  %div.col-md-6
    = f.select :sales_week_id, options_for_select(SalesWeek.all.map{|sw| [sw.display, sw.id]}, object.sales_week_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Sales Week
%div.form-group.form-md-line-input
  = f.label :origin_location_id, class: 'col-md-3 control-label' do
    Origin Location
    %span.required *
  %div.col-md-6
    = f.select :origin_location_id, options_for_select(Location.all.map{|l| [l.name + '(' + l.code + ')', l.id]}, object.origin_location_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Origin Location
%div.form-group.form-md-line-input
  = f.label :destination_location_id, class: 'col-md-3 control-label' do
    Destination Location
    %span.required *
  %div.col-md-6
    = f.select :destination_location_id, options_for_select(Location.all.map{|l| [l.name + '(' + l.code + ')', l.id]}, object.destination_location_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Destination Location
%div.form-group.form-md-line-input
  = f.label :surcharge_group_id, class: 'col-md-3 control-label' do
    Surcharge Group
    %span.required *
  %div.col-md-6
    = f.select :surcharge_group_id, options_for_select(SurchargeGroup.all.map{|s| [s.code, s.id]}, object.surcharge_group_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Surcharge Group Code
%div.form-group.form-md-line-input
  = f.label :commodity_group_id, class: 'col-md-3 control-label' do
    Commodity Group
    %span.required *
  %div.col-md-6
    = f.select :commodity_group_id, options_for_select(CommodityGroup.all.map{|s| [s.name + '(' + s.code + ')', s.id]}, object.surcharge_group_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Commodity Group
%div.form-group.form-md-line-input
  = f.label :tier_id, class: 'col-md-3 control-label' do
    Tier
    %span.required *
  %div.col-md-6
    = f.select :tier_id, options_for_select(Tier.all.map{|s| [s.tier, s.id]}, object.tier_id), {}, {class: 'form-control'}
    %div.form-control-focus
    %span.help-block Enter Tier
%div.form-group.form-md-line-input
  = f.label :d2_volume, class: 'col-md-3 control-label' do
    D2 Volume
    %span.required *
  %div.col-md-6
    = f.number_field :d2_volume, class: 'form-control', 'aria-required' => true, 'aria-describedby' => 'number-error'
    %div.form-control-focus
    %span.help-block Enter D2 Volume
%div.form-group.form-md-line-input
  = f.label :d4_volume, class: 'col-md-3 control-label' do
    D4 Volume
    %span.required *
  %div.col-md-6
    = f.number_field :d4_volume, class: 'form-control', 'aria-required' => true, 'aria-describedby' => 'number-error'
    %div.form-control-focus
    %span.help-block Enter D4 Volume
%div.form-group.form-md-line-input
  = f.label :d5_volume, class: 'col-md-3 control-label' do
    D5 Volume
    %span.required *
  %div.col-md-6
    = f.number_field :d5_volume, class: 'form-control', 'aria-required' => true, 'aria-describedby' => 'number-error'
    %div.form-control-focus
    %span.help-block Enter D5 Volume
%div.form-group.form-md-line-input
  = f.label :d7_volume, class: 'col-md-3 control-label' do
    D7 Volume
    %span.required *
  %div.col-md-6
    = f.number_field :d7_volume, class: 'form-control', 'aria-required' => true, 'aria-describedby' => 'number-error'
    %div.form-control-focus
    %span.help-block Enter D7 Volume
%div.form-group.form-md-line-input
  = f.label :r2_volume, class: 'col-md-3 control-label' do
    R2 Volume
    %span.required *
  %div.col-md-6
    = f.number_field :r2_volume, class: 'form-control', 'aria-required' => true, 'aria-describedby' => 'number-error'
    %div.form-control-focus
    %span.help-block Enter R2 Volume
%div.form-group.form-md-line-input
  = f.label :r5_volume, class: 'col-md-3 control-label' do
    R5 Volume
    %span.required *
  %div.col-md-6
    = f.text_field :r5_volume, class: 'form-control', 'aria-required' => true, 'aria-describedby' => 'number-error'
    %div.form-control-focus
    %span.help-block Enter R5 Volume

_form.html.haml:

.col-md-3
  = link_to "Add Inquery", pricing_histories_add_inquery_path, remote: true, class: 'btn btn-default add-form-button', data: {disable_with: "Please wait..."}


= form_for @pricing_history, html: {class: 'form-horizontal'} do |f|
  %div.row
    %div.col-xs-12.form-body
      = f.fields_for '' do |fd|
        = render 'form_body', f: fd, object: f.object
  %div.form-actions
    %div.row
      %div.col-md-offset-9.col-md-3
        %button.btn.green{:type => 'submit'} Submit
Fatima
  • 345
  • 1
  • 5
  • 15
  • It's not the name that needs to be unique... it's the id. in html all ids on the page need to be unique. names should be the same for a single grouping of radio-buttons in order to make them a group. (In your first example, all the radio buttons have the same id... which will be a problem) – Taryn East Jul 13 '16 at 06:41
  • Looks like somebody else had this same problem - does the solution help you: http://stackoverflow.com/questions/1577631/rails-form-with-multiple-nested-models-causes-issues-with-radio-groups – Taryn East Jul 13 '16 at 06:45
  • ``. This is the problem, all of the radio buttons have the same name, what I want is to select 1 in 2 radio buttons for each form. Now, all the radio buttons have the same name, so if I select one radio button, I can't select the radio button in another form. – Fatima Jul 13 '16 at 06:46
  • I think my problem is different from him. First of all, I am using form_for, secondly, I don't exactly how many forms the user will try to submit. If I know it before hand, I can assign the index of the loop as the unique id for each form. – Fatima Jul 13 '16 at 06:52
  • `id="pricing_history__bco_true"` this id is the same for every single radio button in your example... and it shouldn't be. My best suggestion would be: why not use actual ruby to do a loop... and then your index can be incremented in ruby, and each radio button output with the index that way eg : http://codepen.io/chriscoyier/pen/wKCyh (which I randomly found on the web... obviously alter it to spit out your radio-button instead of a div) – Taryn East Jul 13 '16 at 07:05
  • Thanks for your suggestion. However, the thing is how can I create the loop when I don't know how many forms the user will add and try to submit? – Fatima Jul 13 '16 at 07:15
  • ok, that means that the jquery that adds a new form is where you must store the current index... and each time they add a new form you increment that index and pass it into the form, and the form adds it to the radio-buttons. – Taryn East Jul 13 '16 at 07:22

0 Answers0