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

Lovelady

Filed as issue here: github.com/Polymer/paper-button/issues/14 – Lovelady

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

Boudoir

I use polymer on Javascript, but I believe that it can work in Dart too. – Boudoir

This works fine in Dart, and doesn't require any supporting dart code. I chose to call the component 'paper-native-button', because it doesn't actually define anything re. submit - that happens at point of use (which is more powerful). This seems a pretty elegant solution. – Darendaresay

Actually, I found I did need to add some supporting script to pass through the button attributes like 'raised'. Gist with changes/additions: gist.github.com/hawkett/49146a43d8595aa6c468 - 3 things to note - remove the 'noscript' attribute (mobilemancer.com/2015/01/06/…), made the font inheritance more complete and added script to support the 'raised' attribute. – Darendaresay

I would love to pass attributes like disabled, raised, and z to the paper button. without the help of dart. If anyone gets there before me, please share! – Mathamathe

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>

Globe

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

Eleonoraeleonore

Thanks for a comprehensive list of options, but unfortunately, this still doesn't answer my original question. I will wait for some more time to see if there's any workaround to get native form to be submitted via paper-button. – Lovelady

There is nothing planned so far, could be you have a very long time to wait. I guess you just have to do the submit processing 'manually' similar as shown in Seth's blog post. – Hypaethral

To be clear, a paper-forms project is already underway for Polymer JS. – Flieger

@ScottMiles Great to hear! Didn't saw it mentioned somewhere yet. – Hypaethral

Looks like the only way to easily submit these custom form fields is with ajax-form. This is what the Polymer team recommends as well. Disclaimer: I'm the author of ajax-form. – Zerlina

@ScottMiles Source on that? – Rogan

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();
}

Qualmish