How do I submit 3 forms with 1 submit button? - ruby-on-rails

Question

I have a table that has X rows. I use an iterator to iterate over each object in a collection and render it in a row.
Each object/row is also associated with it's own form.
But I want to save the entire collection at once, and have it update all of the sub-forms when the user hits 1 submit button, rather than 1 for each instance of the form.
This is an example of what the code might look like:
<% #port_stocks.each do |port_stock| %>
<tr>
<td><%= number_to_currency(port_stock.purchase_price) %></td>
<td><%= port_stock.volume %></td>
<td>
<% cp = ClosedPosition.new %>
<%= simple_form_for cp, url: port_stocks_sell_order_path, method: :post, html: { class: "form-inline" } do |f| %>
<div class="form-group">
<%= f.input_field :num_units, id: "sell-ps-#{port_stock.id}", class: "form-control mx-sm-3" %>
</div>
<%= f.submit "Save", class: "btn btn-primary" %>
<% end %>
</td>
</tr>
<% end %>
If there are 3 port_stock objects in the #port_stocks collection, the above form renders 3 submit buttons -- which is exactly what I don't want.
I just want 1 submit button that submits a cp related info for each port_stock object in the collection.

Answer 1

You could hide the submit button inside the simple_form like below:
<% #port_stocks.each do |port_stock| %>
<tr>
<td><%= number_to_currency(port_stock.purchase_price) %></td>
<td><%= port_stock.volume %></td>
<td>
<% cp = ClosedPosition.new %>
<%= simple_form_for cp, url: port_stocks_sell_order_path, method: :post, html: {class: "form-inline"} do |f| %>
<div class="form-group">
<%= f.input_field :num_units, id: "sell-ps-#{port_stock.id}", class: "form-control mx-sm-3" %>
</div>
<%= f.submit "", class: "click-me", style: "display: none;" %>
<% end %>
</td>
</tr>
<% end %>
Then have a button outside the loop like this:
<button type="button" class='btn btn-primary' onclick="submit()">Submit!</button>
Onclick of this button use JS to trigger clicks on hidden submit buttons.
<script>
function submit(){
var el = document.getElementsByClassName('click-me');
for (var i=0;i<el.length; i++) {
el[i].click();
}
}
</script>

Answer 2

Just an idea, following up my comment, using standard form helpers.
Wrap the table with the form:
<%= form_for :closed_position, url: {action: :port_stocks_sell_order_path, method: :post} do |form|%>
<table>
<% #port_stocks.each do |port_stock| %>
<tbody>
<tr>
<td><%= port_stock.volume %></td>
<td><%= port_stock.purchase_price %></td>
<td>
Num: <%= form.text_field "port_stock_id[#{port_stock.id}][num_units]" %>
</td>
</tr>
</tbody>
<% end %>
</table>
<%= form.submit "save" %>
<% end %>
The parameters should be something like:
{"utf8"=>"✓", "authenticity_token"=>"blahblah", "closed_position"=>{"port_stock_id"=>{"1"=>{"num_units"=>"999"}, "2"=>{"num_units"=>"888"}}}, "commit"=>"save", "method"=>"post", "controller"=>"port_stocks", "action"=>"port_stocks_sell_order_path"}
Then manage to save each ClosedPosition in the controller.