Question

在聚合物中，我试图手动提交表格。我的表格如下：

<form id="myForm" on-submit="{{ submitForm }}">
    <input class="text" value="{{ someValue}}">
    <button type="submit">Submit</button>
</form>

在聚合物中我有：

submitForm: function(e) {
    e.preventDefault();
}

每当我尝试执行以下操作时：

document.getElementById('myForm').submit();

表单完全忽略了on-submit属性并将表单发布到新页面。

我为任何想知道为什么要这样做的人建立一个屏幕键盘。每当有人按下屏幕键盘上的回车键时，我都需要提交表格。

有谁知道为什么会这样？

一个JSBin示例，向您显示确切的问题（请参阅警报）：http://jsbin.com/wadihija/2/

Answer 1

来自MDN page关于submit：

调用此方法时，不会触发表单的onsubmit事件处理程序方法...不保证HTML用户代理调用它。

但是，在click类型按钮上调用submit似乎有效。见这里：

http://jsbin.com/tuxac/2/edit

以下是对jsbin的修改，我相信你做了你想做的事情：

http://jsbin.com/wadihija/6/edit

Answer 2

this是否与您尝试做的一致？这是Shadow DOM的一个关键特性的结果：封装。聚合物元素模板中的元素不在主文档中，因此无法通过document.getElementById()等获得。

您可以调用this.shadowRoot.getElementById()和it would work，因为您的聚合物元素原型中的this链接到主机元素。或者甚至更好，利用Polymer为您免费提供的惊人功能。聚合物将this.$暴露给聚合物元素，聚合物元素包含模板中具有ID的每个元素的键！无需方法调用，只需使用this.$.myForm.submit()即可。 Here's the final jsbin

聚合物：手动提交表单

2 个答案: