【问题标题】:How to include Polymer paper-dropdown-menu in form submit如何在表单提交中包含聚合物纸下拉菜单
【发布时间】:2015-08-10 18:48:13
【问题描述】:

当我提交带有document.getElementById("form").submit(); 的 Polymer 表单时,firstName 和 lastName 包含在 POST 数据中,但纸张下拉菜单中的标题值不包含。缺少什么?

<form is="iron-form" id="form" method="post" action="/edit">
    <paper-dropdown-menu name="title" label="Title">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="title">
                <paper-item value="{{item.id}}">{{title.name}}</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <paper-input name="firstName" label="First name"></paper-input>
    <paper-input name="lastName" label="Last name"></paper-input>
    <paper-button raised onclick="submitForm()">Save</paper-button>
</form>

编辑:

这是我完整的工作示例,非常感谢@Brandon 的回答:

<form is="iron-form" id="form" method="post" action="/api/edit">
    <paper-dropdown-menu label="Title" selected-item="{{selectedItem}}" selected-item-label="{{selected}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="title">
                <paper-item value="[[title.id]]">[[title.name]]</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selectedItem.value]]">
    <paper-input name="firstName" label="First name"></paper-input>
    <paper-input name="lastName" label="Last name"></paper-input>
    <paper-button raised onclick="document.getElementById('form').submit()">Save</paper-button>
</form>

【问题讨论】:

  • 可能是因为paper-dropdown-menu 没有实现Polymer.IronFormElementBehavior
  • @Justin XL,您是否知道是否有其他元素可用于在表单中获取

标签: html polymer


【解决方案1】:

这可能会解决您的问题。创建一个隐藏的输入元素并将所选项目分配给隐藏元素的值。这为您提供了铁输入验证器的额外好处,可用于未来表单的多选。

<form is="iron-form" id="form" method="post" action="/edit">
    <paper-dropdown-menu label="Title" selected-item-label="{{selected}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="title">
                <paper-item>{{title.name}}</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selected]]">
    <paper-input name="firstName" label="First name"></paper-input>
    <paper-input name="lastName" label="Last name"></paper-input>
    <paper-button raised onclick="submitForm()">Save</paper-button>
</form>

【讨论】:

  • 感谢您的回答。我会试试看。一般来说,我开始怀疑聚合物的质量。为什么它需要这样一个笨蛋来创建一个带有下拉列表的表单?
  • 您可以只使用标准的 HTML 选择。但是,如果您想要看起来比一般形式更好的东西,有时需要多花一些钱。
  • 谢谢。聚合物很棒,但是它的文档没有捕捉到太多的细微差别。这是救命稻草。
  • 没问题。使用您原来的 paper-item 元素(带有 value 属性)更改: 工作示例:jsbin.com/luvuvo/edit?html,output
  • 非常感谢@Brandon,你真棒。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多