Question

In Ruby on Rails, I’m attempting to update the innerHTML of a div tag using the form_remote_tag helper. This update happens whenever an associated select tag receives an onchange event. The problem is, <select onchange='this.form.submit();'>; doesn’t work. Nor does document.forms[0].submit(). The only way to get the onsubmit code generated in the form_remote_tag to execute is to create a hidden submit button, and invoke the click method on the button from the select tag. Here’s a working ERb partial example.

<% form_remote_tag :url => product_path, :update => 'content', :method => 'get' do -%>   <% content_tag :div, :id => 'content' do -%>     <%= select_tag :update, options_for_select([['foo', 1], ['bar', 2]]), :onchange => 'this.form.commit.click' %>     <%= submit_tag 'submit_button', :style => 'display: none' %>   <% end %> <% end %> 

What I want to do is something like this, but it doesn’t work.

<% form_remote_tag :url => product_path, :update => 'content', :method => 'get' do -%>   <% content_tag :div, :id => 'content' do -%>     # the following line does not work     <%= select_tag :update, options_for_select([['foo', 1], ['bar', 2]]), :onchange => 'this.form.onsubmit()' %>   <% end %> <% end %> 

So, is there any way to remove the invisible submit button for this use case?

There seems to be some confusion. So, let me explain. The basic problem is that submit() doesn’t call the onsubmit() code rendered into the form.

The actual HTML form that Rails renders from this ERb looks like this:

<form action='/products/1' method='post' onsubmit='new Ajax.Updater('content', '/products/1', {asynchronous:true, evalScripts:true, method:'get', parameters:Form.serialize(this)}); return false;'>   <div style='margin:0;padding:0'>     <input name='authenticity_token' type='hidden' value='4eacf78eb87e9262a0b631a8a6e417e9a5957cab' />   </div>   <div id='content'>     <select id='update' name='update' onchange='this.form.commit.click'>       <option value='1'>foo</option>       <option value='2'>bar</option>     </select>     <input name='commit' style='display: none' type='submit' value='submit_button' />   </div> </form> 

I want to axe the invisible submit button, but using a straight form.submit appears to not work. So, I need some way to call the form’s onsubmit event code.

Update: Orion Edwards solution would work if there wasn’t a return(false); generated by Rails. I’m not sure which is worse though, sending a phantom click to an invisible submit button or calling eval on the getAttribute('onsubmit') call after removing the return call with a javascript string replacement!

Answer 1

If you didn’t actually want to submit the form, but just invoke whatever code happened to be in the onsubmit, you could possibly do this: (untested)

var code = document.getElementById('formId').getAttribute('onsubmit'); eval(code);