javascript - Why does this form keep submitting stale params? -

i have comment form rendered multiple times on page, because each comment associated node , each node rendered multiple times.

however, whenever comment sent (via remote), when try send 1 keeps sending first params.

see logs here:

started post "/nodes/101/comments" 127.0.0.1 @ 2015-07-08 16:48:46 -0500 processing commentscontroller#create js   parameters: {"utf8"=>"✓", "comment"=>{"message"=>"comment 1"}, "node_id"=>"101"}   user load (2.9ms)  select  "users".* "users"  "users"."id" = 57  order "users"."id" asc limit 1   familytree load (2.7ms)  select  "family_trees".* "family_trees"  "family_trees"."user_id" = $1 limit 1  [["user_id", 57]]   role load (1.7ms)  select "roles".* "roles" inner join "users_roles" on "roles"."id" = "users_roles"."role_id" "users_roles"."user_id" = $1 , (((roles.name = 'admin') , (roles.resource_type null) , (roles.resource_id null)))  [["user_id", 57]]   node load (4.1ms)  select  "nodes".* "nodes"  "nodes"."id" = $1 limit 1  [["id", 101]]    (1.8ms)  begin   sql (1.8ms)  insert "comments" ("created_at", "message", "node_id", "updated_at", "user_id") values ($1, $2, $3, $4, $5) returning "id"  [["created_at", "2015-07-08 21:48:47.078077"], ["message", "comment 1"], ["node_id", 101], ["updated_at", "2015-07-08 21:48:47.078077"], ["user_id", 57]]    (2.5ms)  commit    (1.7ms)  begin   sql (1.7ms)  update "nodes" set "cached_comment_count" = $1, "updated_at" = $2 "nodes"."id" = 101  [["cached_comment_count", 3], ["updated_at", "2015-07-08 21:48:47.088576"]]    (2.1ms)  commit   rendered comments/create.html.erb (0.2ms) completed 200 ok in 97ms (views: 7.4ms | activerecord: 31.0ms)   started post "/nodes/101/comments" 127.0.0.1 @ 2015-07-08 16:48:51 -0500 processing commentscontroller#create js   parameters: {"utf8"=>"✓", "comment"=>{"message"=>"comment 1"}, "node_id"=>"101"}   user load (2.9ms)  select  "users".* "users"  "users"."id" = 57  order "users"."id" asc limit 1   familytree load (2.2ms)  select  "family_trees".* "family_trees"  "family_trees"."user_id" = $1 limit 1  [["user_id", 57]]   role load (12.7ms)  select "roles".* "roles" inner join "users_roles" on "roles"."id" = "users_roles"."role_id" "users_roles"."user_id" = $1 , (((roles.name = 'admin') , (roles.resource_type null) , (roles.resource_id null)))  [["user_id", 57]]   node load (2.0ms)  select  "nodes".* "nodes"  "nodes"."id" = $1 limit 1  [["id", 101]]    (3.1ms)  begin   sql (4.3ms)  insert "comments" ("created_at", "message", "node_id", "updated_at", "user_id") values ($1, $2, $3, $4, $5) returning "id"  [["created_at", "2015-07-08 21:48:51.243386"], ["message", "comment 1"], ["node_id", 101], ["updated_at", "2015-07-08 21:48:51.243386"], ["user_id", 57]]    (6.2ms)  commit    (2.3ms)  begin   sql (26.9ms)  update "nodes" set "cached_comment_count" = $1, "updated_at" = $2 "nodes"."id" = 101  [["cached_comment_count", 4], ["updated_at", "2015-07-08 21:48:51.264565"]]    (13.4ms)  commit   rendered comments/create.html.erb (1.4ms) completed 200 ok in 131ms (views: 9.2ms | activerecord: 76.0ms) 

here view rendered on - views/dashboard/index.html.erb

      <% @nodes.each |node| %>         <% @card_number += 1 %>  <div class="card-input">   node id: <%= node.id %>   <%= simple_form_for([node, comment.new], remote: true) |f| %>    <%= f.error_notification %>       <%= f.input_field :message, as: :text, id: "card-input-field-#{@card_number}", class: "input-field", placeholder: "share thoughts", cols: "30", rows: "10" %>       <%= content_tag(:a, '', :name => 'submit', :class => 'input-submit icon-circle-right') %>   <% end %> </div> 

note on first load, renders each node id correctly.

this comments_controller#create:

  def create     @node = node.find(params[:node_id])     @comment = current_user.comments.new(comment_params)     @comment.node = @node     @node.cached_comment_count += 1      respond_to |format|       if @comment.save , @node.save          # format.html { redirect_to root_url, notice: 'comment created.' }         format.json { render json: @comment, status: :created }         format.js       else         format.html { render action: 'new' }         format.json { render json: @comment.errors, status: :unprocessable_entity }         format.js       end     end   end 

how every operation after first contain correct params , not first one?

edit 1

it seems issue lies in content_tag submit. here js governs that:

  $(".input-submit").click(function(event) {       event.preventdefault();       $("#new_comment").submit();   }); 

once change submit on simple_form_for to:

 f.button :submit 

edit 2

i have changed form declaration include id, can reference, specifically:

<%= simple_form_for([node, comment.new], html: { id: "new_comment_card-#{@card_number}"}, remote: true) |f| %> 

but, in js (i.e. snippet in edit 1 above), how submit form have clicked in , typing in? tried messing around this didn't work out expected.

my first step trying output of this when click button , got nothing printed console. did this:

  $(".input-submit").click(function(event) {       console.log(this);       event.preventdefault();       $("#new_comment").submit();   }); 

...yet console still came blank.

to find form link descendant of, can use jquery’s parent method (or parents, if link not direct child of form), closest method, so:

$('.input-submit').click(function(event) {   event.preventdefault();   $(this).closest('form').submit(); }); 

that submit form link “in”, without need select form more specific method such finding via id or anything.