paper-button with type=“submit” within form doesn't submit?

Question

I am trying to use paper-button with type attribute set to submit (as one would do with button element) to submit the enclosing form, but for some reason it is unable to submit the form. Is this a bug or feature?

How to make paper-button submit the form?

PS: I am in dart land (not js).

Answer 1

As noticed by Gunter, you can create a custom element which extends some of native element with your desired semantics.

I encountered with your issue too and I've created simple element which gives ability to submit to paper-button

<polymer-element name="paper-button-submit" extends="button" noscript>
  <template>
    <style>
      :host {
        border: 0;
        background: transparent;
        padding: 0;
        font-size: inherit;
      }
    </style>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</polymer-element>

Then you can write this

<button type="submit" is="paper-button-submit">Add</button>

And will get a button with paper-like look

Answer 2

You can achieve the form submit by placing a native button inside the paper-button element:

<paper-button>
  <button>Sign Up</button>
</paper-button>

Then use this following CSS to hide the native button while ensuring it's hitzone fills the entire paper-button element:

<style shim-shadowdom>
  paper-button {
    padding:0;
  }
  paper-button::shadow .button-content {
    padding:0;
  }
  paper-button button {
    padding:1em;
    background-color: transparent;
    border-color: transparent;
  }
  paper-button button::-moz-focus-inner {
    border: 0;
  }
</style>

Answer 3

There was already a discussion about using Polymer elements containing form elements within a form in the Polymer Google group and as far as I remember I answered a similar question here on SO (I will do some research afterwards).

1) You can extend an input element

<polymer-element name="my-element" extends="input">
   ...
</polymer-element>

and use it like

<input is="my-element">

2) You can do the form processing in custom code
(read the values from the form elements and create an AJAX call to send the data to the server)

3) Create a custom form element (extends the 2nd)
which does the form processing and AJAX call

The 1st option is not applicable to core-elments/paper-elements because the don't extend an <input> (or any other form element) but embed it. This applies to form input elements and also to the form submit button.

Some more or less related topics

• Polymer Google Group - polymer element as form input element
• Getting HTML5 to work in Form with multiple polymer-dart components
• Seth Ladd's Blog - Forms, HTTP servers, and Polymer with Dart
• Dart Polymer form field not showing validate errors
• How do you get HTML5 inputs to validate if they are inside Polymer Web Components?

What you can do if only the submit button is a Polymer element, is to invoke the click() method on an invisible (non-Polymer) submit button in the click handler of the <paper-button> for more details see
- Polymer: manually submitting a form

Answer 4

There is no need to create a custom element. According to the docs the following apporach is recommended:

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('form').submit();
}

so you would just bind the onclick event to a function that manually submits your form.

UPDATE

Although the previous example from iron-form uses onclick event it is recommended to use on-tap over on-click:

Tip: Use on-tap rather than on-click for an event that fires consistently across both touch (mobile) and click (desktop) devices.

It is also a good idea to use Polymers own DOM API:

function submitForm(e) {
  Polymer.dom(e).localTarget.parentElement.submit();
}