js + rails - can't get this form working

问题

I adapted this js from this SO question, but I've never used js before and not sure what I'm doing wrong here. It's very possible it's a simple fix, but your help is hugely appreciated.

The goal: When a user adds a class, they put in the name, the type, and the number of students. When :number_of_students changes, the js kicks in and shows the appropriate number of forms_for student (the example i'm working from).

The problem: Overall it's working - the view works, and submitted data goes to the right place. But the first bit of the header (name of gender labels) show up initially, even though they shouldn't (they're all part of the table with id="nos_header". When I change the :number_of_students however, instead of rows showing up, the header disappears and nothing else appears.

Where I'm at:

here's the javascript in student_groups.js:

    var row_i = 0;

function emptyRow() {
   row_i++;
   this.obj = $("<tr></tr>");
   this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
   this.obj.append('<td><input type="text" size="5" name="Student name' + row_i + '"     id="ss_name' + row_i + '""/></td>');
   this.obj.append('<td><input type="text" size="5" name="Gender' + row_i + '" id="ss_gender' + row_i + '""/></td>');
}

function refresh(new_count) {
//how many applications we have drawed now ?
    console.log("New count= " + new_count);
    if(new_count > 0) {
        $('#nos_header').show();
    }
    else {
        $('#nos_header').hide();
    }
var old_count = parseInt($('tbody').children().length);
    console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
 console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0)
  {
    for(var i = 0; i < rows_difference; i++)
    $('tbody').append((new emptyRow()).obj);
  }
else if (rows_difference < 0)//we need to remove rows ..
  {
    var index_start = old_count + rows_difference + 1; 
    console.log("Index start= "+index_start);
    $('tr:gt('+index_start+')').remove();
    row_i += rows_difference;
  }
}

$(document).ready(function () {
    $('#nos').change(function () {
        refresh( $(this).val() );
    })
});

and student_groups/new.html.erb (apologies for the funky formatting, this is how it's best to read in my textmate file):

<%= form_for(@student_group) do |f| %>

  <p>
    <span class="form_field"><%= f.text_field :name, placeholder: "The name of this group" %></span>
  is a/an 
    <%= f.select :type_of_group, [["select a group type", ""], "young learners class (0-6)", "primary class (7-12)", "secondary class (13-17)", "adult class (18+)", "children's sport team", "adult's sport team"] %> 
  and there are 
    <span id="nos" class="dropdown"><%= f.select :number_of_students, (0..60) %></span>
  members.
  </p>


  <table id="nos_header">
      <tbody>    
        <tr>
          <td><%= f.label :name, "Student name:" %></td>
              <td><%= f.label :gender, "Gender:" %></td>
        </tr>
      <%= f.fields_for :students do |builder| %>
        <%= render 'students/form', :f => builder %>
      <% end %>
      </tbody>
    </table>

<%= f.submit "Submit", :class => 'big_button round unselectable' %>

lastly students/_form.html.erb:

<tr>
  <td id="ss_name" class="form_field"><%= f.text_field :name %></td>
  <td id="ss_gender" class="dropdown"><%= f.select :gender, ['Female', 'Male', 'Transgender'] %></td>   
</tr>

回答1:

there were few mistakes , i have corrected it.below is the respective code as well the live working copy from Fiddle.

JS FIDDLE

JS CODE:

$(document).ready(function () {
  //hide table by default
  $('#nos_header').hide ();

  $('#nos').change(function () {
    var opt=$('#nos option:selected');
      //alert(opt.text());
    refresh(opt.text());
  })
});

Happy Coding :)

来源：https://stackoverflow.com/questions/17425446/js-rails-cant-get-this-form-working