<p>In Ruby on Rails, I'm attempting to update the <code>innerHTML</code> of a div tag using the <code>form_remote_tag</code> helper.  This update happens whenever an associated select tag receives an onchange event.  The problem is, <code>&lt;select onchange="this.form.submit();"&gt;</code>; doesn't work.  Nor does <code>document.forms[0].submit()</code>.  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.</p>

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

<p>What I want to do is something like this, but it doesn't work.</p>

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

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

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

<p>The actual HTML form that Rails renders from this ERb looks like this:</p>

<pre><code>&lt;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;"&gt;
  &lt;div style="margin:0;padding:0"&gt;
    &lt;input name="authenticity_token" type="hidden" value="4eacf78eb87e9262a0b631a8a6e417e9a5957cab" /&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
    &lt;select id="update" name="update" onchange="this.form.commit.click"&gt;
      &lt;option value="1"&gt;foo&lt;/option&gt;
      &lt;option value="2"&gt;bar&lt;/option&gt;
    &lt;/select&gt;
    &lt;input name="commit" style="display: none" type="submit" value="submit_button" /&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>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.</p>

<p>Update: Orion Edwards solution would work if there wasn't a <code>return(false);</code> 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 <code>getAttribute('onsubmit')</code> call after removing the return call with a javascript string replacement!   </p>

[{'answer_id': 33879, 'author': 'FlySwat', 'author_id': 1965, 'author_profile': 'https://Stackoverflow.com/users/1965', 'pm_score': 2, 'selected': False, 'text': "<p>give your form an <code>id</code>.</p>\n\n<p>then</p>\n\n<pre><code>document.getElementById('formid').submit();\n</code></pre>\n\n<p>If you are loading Javascript into a <code>div</code> via <code>innerHTML</code>, it won't run...just FYI.</p>\n"}, {'answer_id': 33941, 'author': 'Orion Edwards', 'author_id': 234, 'author_profile': 'https://Stackoverflow.com/users/234', 'pm_score': -1, 'selected': True, 'text': "<p>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)</p>\n\n<pre><code>var code = document.getElementById('formId').getAttribute('onsubmit');\neval(code);\n</code></pre>\n"}, {'answer_id': 33999, 'author': 'John Millikin', 'author_id': 3560, 'author_profile': 'https://Stackoverflow.com/users/3560', 'pm_score': 2, 'selected': False, 'text': "<p>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.</p>\n\n<pre><code>eval ('(function(){' + code + '})()');\n</code></pre>\n\n<p>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.</p>\n"}, {'answer_id': 34046, 'author': 'hoyhoy', 'author_id': 3499, 'author_profile': 'https://Stackoverflow.com/users/3499', 'pm_score': -1, 'selected': False, 'text': "<p>In theory, something like <code>eval ('function(){' + code + '}()');</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 <code>onchange</code>.  Another solution would be to somehow get Rails to inject the <code>onsubmit</code> code into the <code>onchange</code> 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 <code>onchange</code> field.</p>\n"}, {'answer_id': 104032, 'author': 'fatgeekuk', 'author_id': 17518, 'author_profile': 'https://Stackoverflow.com/users/17518', 'pm_score': 1, 'selected': False, 'text': "<p>Don't.</p>\n\n<p>You have a solution.</p>\n\n<p>Stop, move on to the next function point.</p>\n\n<p>I know, it is not pretty, but there are bigger problems.</p>\n"}, {'answer_id': 481682, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>Not sure if you have an answer yet or not, but in the <code>onclick</code> function of the select, call <code>onsubmit</code> instead of <code>submit</code>.</p>\n'}, {'answer_id': 2466332, 'author': 'ErikE', 'author_id': 57611, 'author_profile': 'https://Stackoverflow.com/users/57611', 'pm_score': 3, 'selected': False, 'text': "<p>I realize this question is kind of old, but what the heck are you doing eval for?</p>\n\n<pre><code>document.getElementById('formId').onsubmit();\ndocument.getElementById('formId').submit();\n</code></pre>\n\n<p>or</p>\n\n<pre><code>document.formName.onsubmit();\ndocument.formName.submit();\n</code></pre>\n\n<p>When the DOM of a document is loaded, the events are not strings any more, they are functions.</p>\n\n<pre><code>alert(typeof document.formName.onsubmit); // function\n</code></pre>\n\n<p>So there's no reason to convert a function to a string just so you can eval it.</p>\n"}]
['https://Stackoverflow.com/questions/33860', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3499/']