How to include Polymer paper-dropdown-menu in form submit

Question

When I submit this Polymer form with document.getElementById(\"form\").submit(); firstName and lastName are included in the POST-data, but the title-value from

Answer 1

This may solve your problem. Create a hidden input element and assign the selected item to the hidden element's value. This gives you the added benefit of the iron-input validators for multi-select for future forms.

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