CODEWITHSUNDEEP
htmlpolymer
yglodt
yglodt

Reputation: 14551

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

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 the paper-dropdown-menu not. What is missing ?

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

Edit:

Here my complete working example, thanks a lot to @Brandon for his answer:

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

Upvotes: 6

Views: 4092

Answers (1)

Brandon
Brandon

Reputation: 570

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>

Upvotes: 8

Related Questions