Question

Edit – clearly no-one has any idea what is vexing me here. I think it’s just a matter of there being something that I’ve done elsewhere in the page that’s blocking the status attribute being sent. The problem is I just can’t see anything. I’m hoping someone has seen something similar and can suggest where I need to look.

---

I have a dummy form on my page to post data to my web-app. It is created in Rails (using HAML) like so;

=form_tag bulk_invoice_path(''), method: 'put', class: 'mark-sent-form' do
  =hidden_field_tag 'invoice[status]', 'Sent'

This generates the following html;

<form accept-charset="UTF-8" action="/bulk_invoices/" class="mark-sent-form" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="_method" type="hidden" value="put" />
    <input name="authenticity_token" type="hidden" value="OU8GtbHycR/EJ+H3GG9MN59xI59v47LSaFc2wYZloAs=" />
  </div>
  <input id="invoice_status" name="invoice[status]" type="hidden" value="Sent" />
</form>

In the DOM, this appears as follows

<form accept-charset="UTF-8" action="/bulk_invoices/" class="mark-sent-form" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="OU8GtbHycR/EJ+H3GG9MN59xI59v47LSaFc2wYZloAs=">
  </div>
  <input id="invoice_status" name="invoice[status]" type="hidden" value="Sent">
</form>

This form is posted with jquery (using coffeescript) like so;

jQuery ->
  $('a.mark-sent').click -> updateBulkInvoices('.mark-sent-form')

updateBulkInvoices = (form) ->
  $(form).attr('action', "/bulk_invoices/#{checkedInvoices().get().join()}").submit()

This pattern has served me well with other actions but the ‘invoice[status]’ seems to be causing problems. When the form is submitted with jQuery the hidden field is not passed. I see the following in my Rails console;

Parameters: {"utf8"=>"✓", "authenticity_token"=>"+qW9kIih5l2j69w1LK2YfQ9mYQ7nKPDm5XgLZuKB4ic=", "id"=>"16"}

i.e. the invoice[status] field isn’t being passed with the form parameters. If I change the name of this field to anything else it works just fine, e.g.

=form_tag bulk_invoice_path(''), method: 'put', class: 'mark-sent-form' do
  =hidden_field_tag 'invoice[flatus]', 'sent'

gives me the following parameters in my console;

Parameters: {"utf8"=>"✓", "authenticity_token"=>"+qW9kIih5l2j69w1LK2YfQ9mYQ7nKPDm5XgLZuKB4ic=", "invoice"=>{"flatus"=>"sent"}, "id"=>"16"}

I see the same thing happening if I monitor the ‘network’ tab on Chrome’s developer tools so I don’t think it’s a Rails thing, it seems to be a browser issue. I get the same thing with Safari and Firefox as well though.

Is status some sort of magical reserved word in browser forms? What’s going on here?

Answer 1

I have not been able to reproduce the problem, but I suspect it is being caused by the Javascript when submitting the form. To debug this, you can do the following:

1. Open the page in Chrome
2. Right click the submit button, choose ‘inspect element’
3. select the ‘sources’ tab.
4. In the sources tab, find the source for the Javascript being called
   when you click submit. You will probably have to click on the
   teensy right arrow in the box beneath the ‘elements’ tab. Also, if
   the code has been uglified with all the line breaks removed, you can
   click on the ‘pretty print’ curly braces icon at the bottom of the
   page.
5. Once you find the method, click on the line number next to it on the
   left. In the right pane you should see it appear under the
   “Breakpoints” section.
6. Reload the page
7. Click the submit button.

This should bring you into the Javascript debugger paused on the submit action and you can then step through the code and see exactly what it is doing.

I hope this helps!