是否可以在表单上以编程方式调用 Javascript 的 onsubmit 事件?
-
09-06-2019 - |
题
在 Ruby on Rails 中,我尝试更新 innerHTML
使用 div 标签的 form_remote_tag
帮手。每当关联的选择标记收到 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 事件代码。
更新:如果没有,Orion Edwards 解决方案将会起作用 return(false);
由 Rails 生成。我不确定哪个更糟糕,向不可见的提交按钮发送虚拟点击或在 getAttribute('onsubmit')
使用 javascript 字符串替换删除返回调用后调用!
解决方案
如果您实际上不想提交表单,而只是调用 onsubmit 中的任何代码,您可以这样做:(未经测试)
var code = document.getElementById('formId').getAttribute('onsubmit');
eval(code);
其他提示
我意识到这个问题有点老了,但是你到底在做什么?
document.getElementById('formId').onsubmit();
document.getElementById('formId').submit();
或者
document.formName.onsubmit();
document.formName.submit();
当文档的 DOM 被加载时,事件不再是字符串,而是函数。
alert(typeof document.formName.onsubmit); // function
因此,没有理由将函数转换为字符串以便可以对其进行评估。
给你的表格一个 id
.
然后
document.getElementById('formid').submit();
如果您将 Javascript 加载到 div
通过 innerHTML
, ,它不会运行...仅供参考。
如果您必须使用 Rail 的内置 Javascript 生成,我会使用 Orion 的解决方案,但需要进行一点小改动来补偿返回代码。
eval ('(function(){' + code + '})()');
然而,在我看来,从长远来看,通过将 Javascript 代码分离到外部文件或单独的可调用函数中,您会更轻松。
不。
你有一个解决方案。
停止,继续下一个功能点。
我知道,这并不漂亮,但还有更大的问题。
不确定你是否已经有了答案,但在 onclick
选择、调用功能 onsubmit
代替 submit
.
理论上,类似 eval ('function(){' + code + '}()');
可以工作(尽管语法失败)。即使这确实有效,通过 select 调用 eval 仍然有点贫民窟 onchange
. 。另一个解决方案是以某种方式让 Rails 注入 onsubmit
代码写入 onchange
选择标签的字段,但我不确定是否有办法做到这一点。ActionView 有 link_to_remote,但是没有明显的帮助器来生成相同的代码 onchange
场地。