是否可以在表单上以编程方式调用Javascript的onsubmit事件？ [英] Is it possible to call Javascript's onsubmit event programmatically on a form?

问题描述

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

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?

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

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.

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

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>

我想破解不可见的提交按钮，但是使用直接的form.submit似乎不起作用。因此，我需要一些方法来调用表单的onsubmit事件代码。

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.

更新：如果没有返回，Orion Edwards解决方案将起作用（错误）; 由Rails生成。我不确定哪个更糟，但是在删除了一个返回调用之后，在 getAttribute（'onsubmit'）调用上发送幻象点击一个不可见的提交按钮或调用eval一个javascript字符串替换！

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!

推荐答案

如果你实际上并不想提交表单，只是调用在onsubmit中发生的任何代码，你可能会这样做:(未经测试）

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

这篇关于是否可以在表单上以编程方式调用Javascript的onsubmit事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！