Multiple rails forms on same page: clicking submit button per form always works in safari, sometimes works in firefox

Question

On an index page I have a table with a bunch of listed items. Each <tr></tr> within the table's <tbody>not only lists each item, but also allows you to

update that item
click edit to take you to the edit screen for that item

Here is a picture:

Within development in safari: I can successfully update each listed item and it all works just fine. However: when running my feature spec with capybara and selenium-webkit (which uses firefox):

It appears that capybara finds the submit button ok and even clicks it
But then nothing happens. For some reason the form appears to not be submitting when that update button is clicked.

To make things even more strange: in development mode while testing with firefox, clicking the update button works sometimes. Sometimes it doesn't work and I have to refresh the page, and then it works.

I tried putting a binding.pry in right before clicking the Update abc button in order to manually click the button at that step. I noticed that clicking the button manually was not submitting the form either.

Here is my relevant spec:

scenario "within the index page", js: true do
  select 'some selection', from 'item_1_jazz'
  select '12345', from 'item_1_something'
  # I attempted putting a binding.pry here, and noticed that clicking the update button still wasn't submitting the form
  find("#update_some_item_1_btn").click

  expect(page).to have_content 'The item was successfully updated.'
end

Update Here are my buttons within the form:

<td class="btn-group">
  <%= f.submit 'Update abc', class: "btn btn-success btn-sm", id: "update_#{dom_id(item)}_btn" %>
  <%= link_to edit_item_path(item), class: "btn btn-info btn-sm" do %>
    <i class="fa fa-pencil"></i> Edit
  <% end %>
</td>

Question: In firefox: Capybara appears to find the submit button just fine and even click it. But why isn't Capybara able to submit the form within Firefox? Also: why in development mode with firefox does the button only work sometimes? It appears something is stopping the form form from submitting.

Does this button work when you click it manually in browser? Are you sure button within <form></form>? — Aleksey
@Aleksey thank you for your response. I did update my question to include the code for the submit buttons in case that helps. The buttons are within the form. Within development mode, I can click the buttons manually in the browser and it works. However: within my specs when I put a binding.pry in: Clicking the button does not work. — Neil
And what about button id? What is "update_#{dom_id(item)}_btn" is exaclty equal to? — Aleksey
@Neil Correct - the only valid children of tr elements are td and th elements - w3.org/TR/html5/tabular-data.html#the-tr-element. If you don't need IE compatibility you can put a form="some_name" attribute on the inputs and buttons you want to be part of the same form - if you do need IE compatibility then you will need to rearrange how your form works (for instance 1 form around the whole table and then decide which record to update based on the button used to submit) -- or do your layout without using tables — Thomas Walpole

Thomas Walpole Thomas Walpole · Accepted Answer · 2016-06-29T16:19:08

Based on responses to comments on the OQ, it appears you have form elements wrapping your td elements inside a tr. That is invalid HTML since a form element is not a valid child of a tr, and different browsers may/do interpret markup like that differently. If you don't need IE compatibility then you can use the HTML5 form attribute to tie form elements outside a form back to the form you want them associated with, however if you do need IE compatibility you'll need to look at other solutions such as not using table/tr/td elements but possibly styling other types of elements with 'display: table/table-row/etc` or one form wrapping the whole table and determining which element to update based on the button clicked.

Multiple rails forms on same page: clicking submit button per form always works in safari, sometimes works in firefox

1 Answers