关于ruby on rails:是否可以在表单上以编程方式调用Javascript的onsubmit事件?

关于ruby on rails:是否可以在表单上以编程方式调用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部分示例。

1
2
3
4
5
6
<% 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 %>

我想做的事情是这样的,但它不起作用。

1
2
3
4
5
6
<% 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格式如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
<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;">
 
    <input name="authenticity_token" type="hidden" value="4eacf78eb87e9262a0b631a8a6e417e9a5957cab" />
 
 
    <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" />
 
</form>

我想砍掉不可见的提交按钮,但是使用直线形式。提交似乎不起作用。因此,我需要某种方式来调用表单的onsubmit事件代码。

更新:如果没有Rails生成的return(false);,则Orion Edwards解决方案将起作用。我不知道哪一种情况更糟,将幻像式点击发送到不可见的提交按钮,或者在用JavaScript字符串替换删除返回调用之后,在getAttribute('onsubmit')调用中调用eval!


我知道这个问题有点陈旧,但是您打算做什么呢?

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

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

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

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

因此,没有理由仅将函数转换为字符串即可进行评估。


为您的表格提供id

然后

1
document.getElementById('formid').submit();

如果要通过innerHTML将Javascript加载到div中,它将无法运行...仅供参考。


如果必须使用Rail的内置Javascript生成,我将使用Orion的解决方案,但需要进行一些小的改动以补偿返回代码。

1
eval ('(function(){' + code + '})()');

但是,从长远来看,通过将Javascript代码分离到一个外部文件或单独的可调用函数中,您将拥有一个更轻松的时间。


不要。

您有解决方法。

停止,继续到下一个功能点。

我知道,它并不漂亮,但是存在更大的问题。


不确定是否有答案,但是在选择的onclick函数中,调用onsubmit而不是submit


理论上,类似eval ('function(){' + code + '}()');的东西可能会起作用(尽管语法失败)。即使这样做确实可行,通过select onchange调用eval仍然是一种贫民窟。另一个解决方案是以某种方式使Rails将onsubmit代码注入到select标签的onchange字段中,但是我不确定是否有这样做的方法。 ActionView具有link_to_remote,但是在onchange字段中没有明显的帮助程序来生成相同的代码。


如果您实际上不想提交表单,而只是调用onsubmit中碰巧的任何代码,则可以执行以下操作:(未经测试)

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

推荐阅读

    联想垫a2207如何调用a2207平板评价

    联想垫a2207如何调用a2207平板评价,,联想a2207垫在1600 3G双网双待平板电脑的位置。作为以前的热门产品a2107升级版,a2207处理器取得了可观

    确定java按钮响应事件的代码

    确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。 是定义的容器。 容器(CP =得到内容面板); / /

    车载电脑系统编程|车载电脑操作系统

    车载电脑系统编程|车载电脑操作系统,,1. 车载电脑操作系统白名单的概念与“黑名单”相对应。白名单是设置能通过的用户,白名单以外的用户都

    90后瓶门事件图片

    90后瓶门事件图片,,现在孩子们还太早,有些女孩子总是在门口等一会儿,最近发生了一次酒瓶门事件。 近日,山东一家寄宿学校的一名女生带着一瓶

    标签尺寸设置|标签的尺寸

    标签尺寸设置|标签的尺寸,,1. 标签的尺寸有很多款尺寸的保鲜盒,容量;350ml,规格尺寸:135x102x52mm, 容量;800ml;规格尺寸:205x134x52mm, 容量;1.0L;

    台式电脑编程|台式电脑编程方便吗

    台式电脑编程|台式电脑编程方便吗,,台式电脑编程方便吗学习电脑锣cnc编程大约分为以下阶段:第一阶段:学徒期①熟悉机床的操作,保养,以及检具、

    个性标签在哪里设置|添加个性标签

    个性标签在哪里设置|添加个性标签,,1. 添加个性标签微信标签类似于qq印象,可以给自己的微信好友贴上一些个性标签,方面查找类似特性的好友。