Dynamically changing form fields from previously selected fields, iterative javascript

Question

My question is almost similar to this one. Just a slight difference.

I have two models- Family and Person with has_many from family to person and accepts_nested_attributes_for :persons in family.rb

In my FamiliesController I have edit method for editing the records.There I'm using nested forms for a family and the corresponding persons. (So a single family can have many persons)

In my edit.html.erb I have form like:

<%= simple_form_for @family do |f| %>
  #family fields here
  <%= f.simple_fields_for :persons do |p| %>
   <%= p.input :gender,as: :radio_buttons,collection: ["Male","Female"],wrapper_html: {id: "gender"} %>
   <%= p.input :question,wrapper_html: {id: "question"} %>
  <% end %>
  <%= f.submit "Submit" %>
<% end %>

(Similar to the question as in the link)

And I applied the same javascript as mentioned in the answer. (here)

    $(function(){
    var toggle_gender = function(visible) {
        if (visible){
            $("#question").show();
        } else {
            $("#question").hide();
        }
    }

    $("#gender input").change(function(){
        toggle_gender($(this).val()=="Male")
    })

    toggle_gender($("#gender input:checked").val()=="Male")
})();

Generated HTML:

<div class="control-group radio_buttons required family_persons_gender gender">
 <label class="radio_buttons required control-label">
  <abbr title="required">*</abbr>
  Gender
 </label>
 <div class="controls">
  <label class="radio">
   <input id="family_persons_attributes_1_gender_male" class="radio_buttons required" type="radio" value="Male" name="family[persons_attributes][1][gender]" checked="checked">
Male
  </label>
  <label class="radio">
   <input id="family_persons_attributes_1_gender_female" class="radio_buttons required" type="radio" value="Female" name="family[persons_attributes][1][gender]">
Female
  </label>
 </div>
</div>  

<div class="control-group string required family_persons_mobnum mobnum">
 <label class="string required control-label" for="family_persons_attributes_1_mobnum">
  <abbr title="required">*</abbr>
  Mobile No.
 </label>
 <div class="controls">
  <input id="family_persons_attributes_1_mobnum" class="string required" type="text" value="9099067758" size="50" name="family[persons_attributes][1][mobnum]">
 </div>
</div>

But this only works for the first person. Meaning If I have 1 family and 3 persons the javascript only works for the first person. Why so?

Meaning If there are 2 persons and I change the gender in 2nd person the javascript works on the first person and not on the 2nd person

How do I fix this problem?

I read somewhere to use iterative javascript (some even said underscore.js).

Or suggest any alternative way to do this

tihom · Accepted Answer · 2013-09-24 12:24:26Z

1

This is because your are using id to get the DOM elements. A page is supposed to have unique ids so jQuery matches the first element it finds with that id. You need to use class. Change the html and functions to sthing like this (code not tested so beware):

<%= simple_form_for @family do |f| %>
  #family fields here
  <%= f.simple_fields_for :persons do |p| %>
   <%= p.input :gender,as: :radio_buttons,collection: ["Male","Female"],wrapper_html: {class: "gender"} %>
   <%= p.input :question,wrapper_html: {class: "question"} %>
  <% end %>
  <%= f.submit "Submit" %>
<% end %>


  $(function(){
    var toggle_gender = function(elem) {
       elem.closest(".gender").siblings('.question').toggle(elem.val() =="Male");

    }

    $(".gender input").change(function(){
       toggle_gender($(this))
    })

    $(".gender input:checked").each(function(){
       toggle_gender($(this))
    })

 })();

edited Sep 24, 2013 at 12:24

answered Sep 24, 2013 at 10:45

tihom

8,0032 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

user2675010 Over a year ago

Will this work for all the the questions with the same class name?

tihom Over a year ago

when gender input changes it would search for the question for the same person and toggle its display. It should only toggle the one question related to the gender radio button and it should work for all 3.

user2675010 Over a year ago

Updated question Added the generated HTML. correspondingly changed the class in the js

tihom Over a year ago

is the question div in the html?

user2675010 Over a year ago

actually it is the mobnum div. I have also changed the js correspondingly. I had added question here just for the sake of asking on SO.

|

Collectives™ on Stack Overflow

Dynamically changing form fields from previously selected fields, iterative javascript

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related