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

By : hoyhoy
Source: Stackoverflow.com
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!

By : hoyhoy


Answers

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.

By : FlySwat


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.

By : hoyhoy


This video can help you solving your question :)
By: admin