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

Question

在 Ruby on Rails 中，我正在尝试更新 innerHTML使用 form_remote_tag 的 div 标签 helper 。只要关联的选择标记收到 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>

我想砍掉不可见的提交按钮，但使用直接的表单提交似乎不起作用。所以，我需要一些方法来调用表单的 onsubmit 事件代码。

更新:如果没有 return(false);，Orion Edwards 解决方案将起作用由 Rails 生成。我不确定哪个更糟糕，向不可见的提交按钮发送幻象点击或在 getAttribute('onsubmit') 上调用 eval在使用 javascript 字符串替换删除返回调用后调用!

Answer 1

我知道这个问题有点老了，但你到底在做什么 eval？

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

或

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

当加载文档的 DOM 时，事件不再是字符串，而是函数。

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

因此没有理由将函数转换为字符串只是为了求值。