Multiple form submissions on single page - only want to submit one but it is submitting them all
Okay, so this is a very strange problem and it has a lot of possible reasons so I'll try to include everything one would need to answer it but if there is anything else just tell me and i'll post it
So I have an app which lists 'wishes' basically just a blog/post model. Each wish has many votes, and votes belong to the wish. On my index page I would like to list all of the wishes开发者_开发知识库 and corresponding votes, a button to allow casting a vote, and a form to submit a new wish
This is the _new wish partial
<%= form_for( @wish, :remote => true) do |f| %>
<div class="field">
<%= f.label :title, 'I Wish UChicago Had' %>
<%= f.text_field :title %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
it is remote because i want to use ajax to post it on the index page here is the way i list the wishes, in a table with the name, votes and a button to vote
<tr>
<td> <%= w.title %> </td>
<td> <%= w.author %> </td>
<td> <%= w.count_votes %> </td>
<td> <%= render 'vote' %> </td>
<tr>
and finally the vote partial
<%= form_for(@vote) do |f| %>
<div class="fields">
<%= f.hidden_field :wish_id, :value => @w.id%>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Now here is the issue, here is a copy of the rails log when I try to create a new wish
Started POST "/wishes" for 127.0.0.1 at 2011-04-16 19:44:05 -0500
Processing by WishesController#create as JS
Parameters: {"utf8"=>"✓", "authenticity_token"=>"FnrT95FCdv5fJs8AoxIMhrRjBk79wmWJ2s/RdsB43Pg=", "wish"=>{"title"=>"paul"}}
AREL (0.7ms) INSERT INTO "wishes" ("title", "body", "author", "created_at", "updated_at") VALUES ('paul', NULL, NULL, '2011-04-17 00:44:05.190203', '2011-04-17 00:44:05.190203')
Rendered wishes/create.js.erb (0.4ms)
Completed 200 OK in 32ms (Views: 8.2ms | ActiveRecord: 0.7ms)
Started POST "/votes" for 127.0.0.1 at 2011-04-16 19:44:05 -0500
Processing by VotesController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"FnrT95FCdv5fJs8AoxIMhrRjBk79wmWJ2s/RdsB43Pg=", "vote"=>{"wish_id"=>"1"}}
Wish Load (0.5ms) SELECT "wishes".* FROM "wishes" WHERE "wishes"."id" = 1 LIMIT 1
AREL (0.3ms) INSERT INTO "votes" ("weight", "wish_id", "created_at", "updated_at") VALUES (1, 1, '2011-04-17 00:44:05.321513', '2011-04-17 00:44:05.321513')
Redirected to http://localhost:3000/
Completed 302 Found in 62ms
Started GET "/" for 127.0.0.1 at 2011-04-16 19:44:05 -0500
Processing by WishesController#index as HTML
Wish Load (54.4ms) SELECT "wishes".* FROM "wishes"
As you can see, the wishes posts correctly to /wishes
and even renders the create.js
correctly! but then it keeps going and renders the /votes
post also! and this gets rendered as html as usual.
Why is it submitting both forms? I just want to submit one or the other?
EDIT_ here is the outputted HTML on the page
<table border="1">
<tr>
<td> paul </td>
<td> </td>
<td> 1 </td>
<td> <form accept-charset="UTF-8" action="/votes" class="new_vote" id="new_vote" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="FnrT95FCdv5fJs8AoxIMhrRjBk79wmWJ2s/RdsB43Pg=" /></div>
<div class="fields">
<input id="vote_wish_id" name="vote[wish_id]" type="hidden" value="1" />
</div>
<div class="actions">
<input id="vote_submit" name="commit" type="submit" value="Create Vote" />
</div>
</form> </td>
<tr>
<tr>
<td> paul kaplan </td>
<td> </td>
<td> 0 </td>
<td> <form accept-charset="UTF-8" action="/votes" class="new_vote" id="new_vote" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="FnrT95FCdv5fJs8AoxIMhrRjBk79wmWJ2s/RdsB43Pg=" /></div>
<div class="fields">
<input id="vote_wish_id" name="vote[wish_id]" type="hidden" value="2" />
</div>
<div class="actions">
<input id="vote_submit" name="commit" type="submit" value="Create Vote" />
</div>
</form> </td>
<tr>
</table>
<form accept-charset="UTF-8" action="/wishes" class="new_wish" data-remote="true" id="new_wish" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="FnrT95FCdv5fJs8AoxIMhrRjBk79wmWJ2s/RdsB43Pg=" /></div>
<div class="field">
<label for="wish_title">I Wish I Had</label>
<input id="wish_title" name="wish[title]" size="30" type="text" />
</div>
<div class="actions">
<input id="wish_submit" name="commmm" type="submit" value="submit" />
</div>
</form>
</body>
</html>
it has been a while, but for completeness if anyone else hits this problem I figure I should put up my answer. basically the comments above where correct, I had 2 forms with the same id so it was submitting them both, and the javascript was messing it up.
精彩评论