是否可以在表单上以编程方式调用Javascript的onsubmit事件？

Question

在Ruby on Rails中,我试图innerHTML使用form_remote_tag帮助器更新div标签.只要关联的选择标记收到onchange事件,就会发生此更新.问题是,<select onchange="this.form.submit();">; 不起作用.也没有document.forms[0].submit().获取form_remote_tag中生成的onsubmit代码执行的唯一方法是创建一个隐藏的提交按钮,并从select标签调用按钮上的click方法.这是一个有效的ERb部分示例.

<% 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 %>

我想做的就是这样,但它不起作用.

<% 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 %>

那么,有没有办法删除此用例的隐形提交按钮？

似乎有些混乱.所以,让我解释一下.基本问题是submit()不会调用onsubmit()呈现在表单中的代码.

Rails从此ERb呈现的实际HTML表单如下所示:

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

我想要破解隐形提交按钮,但是使用直接的form.submit似乎不起作用.所以,我需要一些方法来调用表单的onsubmit事件代码.

更新:如果没有return(false);由Rails生成,Orion Edwards解决方案将起作用.我不确定哪个更糟糕,getAttribute('onsubmit')在使用javascript字符串替换删除返回调用后,发送虚拟点击进入隐形提交按钮或调用eval !

Answer 1

我意识到这个问题有点陈旧,但你到底在做什么呢？

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

要么

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

当加载文档的DOM时,事件不再是字符串,它们是函数.

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

因此没有理由将函数转换为字符串,以便您可以评估它.

Answer 2

如果您实际上不想提交表单，而只是调用 onsubmit 中发生的任何代码，您可以这样做：（未经测试）

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