How to submit a form with polymer?

Question

I've have this polymer contact-element:

<polymer-element name="contact-element">
  <template>
    <paper-input label="Your Name" id="contact-name" floatingLabel></paper-input>
    <paper-input multiline label="Your text here..." id="contact-message" floatingLabel></paper-input>
    <paper-button label="Send Data" id="contact-submit" raisedButton></paper-button>
  </template>
  <script>
    Polymer({});
  </script>
</polymer-element>

It's included in this index.html

<form action="/sendMessage" method="GET">
        <contact-element></contact-element>
</form>

Is there an submit-attribute for the paper-button or do I have to do the submit with JS?

As far as I know you still need to deal with sending forms like always. Isn't polymer just a custom tag and import library? — morkro, Jul 25 '14 at 09:23
Yes, but polymer doesn't render a "real" button. It's only a CSS-styled DIV. So it's not possible to submit my form. — alexP, Jul 25 '14 at 09:33
I thought there is a way to use the paper-button elements. They are already styled with css. — alexP, Jul 25 '14 at 09:44
http://stackoverflow.com/questions/24867107/paper-button-with-type-submit-within-form-doesnt-submit — Oliver, Jul 25 '14 at 18:48

score 2 · Answer 1 · edited Feb 05 '15 at 23:42

2

Try the ajax-form element: http://ajax-form.raynicholus.com.

It supports the paper elements.

edited Feb 05 '15 at 23:42

Ray Nicholus

19,538
14
59
82

answered Nov 21 '14 at 01:10

Travis Reeder

38,611
12
87
87

M H · Answer 2 · 2016-07-19T13:23:03.920

For any future Readers, now that 1.0 is released:

This is basic html form processing. At the time of this writing, Polymer now has the iron-form, but you still submit it like any other form.

<form is="iron-form" id="form" method="post" action="/">

  <paper-input name="testinput"></paper-input>

  <paper-button raised click="document.getElementById('form').submit();">
     Post
  </paper-button>

</form>

score 1 · Answer 3 · edited Feb 05 '15 at 23:42

From Polymer's blog: https://blog.polymer-project.org/featured/2014/09/23/featured-002/

Ray Nicholus’ ajax-form element provides a simple way to submit forms. ajax-form works with traditional form elements, as well as any custom elements that have both a name attribute and a value – including the Core and Paper input elements.

https://github.com/rnicholus/ajax-form http://ajax-form.raynicholus.com

score 0 · Answer 4 · edited May 23 '17 at 10:29

0

Since, as you pointed out, paper-buttons do not extend the native button element, you will have to either write your own JavaScript to handle form submission or wait for the upcoming paper-forms Polymer element.

edited May 23 '17 at 10:29

Community

1
1

answered Jul 28 '14 at 17:40

CletusW

3,890
1
27
42

How to submit a form with polymer?

4 Answers4

Linked