Is it possible to call Javascript's onsubmit event programatically on a form?

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

give your form an id.

then

document.getElementById('formid').submit();

If you are loading Javascript into a div via InnerHTML, it won't run...just FYI.

Answer 2

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);

Answer 3

If you have to use Rail's built-in Javascript generation, I would use Orion's solution, but with one small alteration to compensate for the return code.

eval ('(function(){' + code + '})()');

However, in my opinion you'd have an easier time in the long run by separating out the Javascript code into an external file or separate callable functions.

Answer 4

In theory, something like eval ('function(){' + code + '}()'); could work (that syntax fails though). Even if that did work, it would still be sort of ghetto to be calling an eval through a select onchange. Another solution would be to somehow get Rails to inject the onsubmit code into the onchange field of the select tag, but I'm not sure if there's a way to do that. ActionView has link_to_remote, but there's no obvious helper to generate the same code in the onchange field.

Answer 5

Don't.

You have a solution.

Stop, move on to the next function point.

I know, it is not pretty, but there are bigger problems.

Answer 6

Not sure if you have an answer yet or not, but in the onclick function of the select, call onsubmit instead of submit.

Answer 7

I realize this question is kind of old, but what the heck are you doing eval for?

document.getElementById('formId').onsubmit();
document.getElementById('formId').submit();

or

document.formName.onsubmit();
document.formName.submit();

When the DOM of a document is loaded, the events are not strings any more, they are functions.

alert(typeof document.formName.onsubmit); // function

So there's no reason to convert a function to a string just so you can eval it.