Polymer + form POST data

Question

I have this

<form id="form_837299" class="appnitro"  method="post" action="insert.php"> <paper-input label="Title" name="title" maxlength="255">
            </paper-input>
          <paper-input floatinglabel multiline label="text" name="text"></paper-input>                           


          <li class="buttons">                                       

            <input type="hidden" name="form_id" value="837299" />                                                        
            <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />                           
          </li>                          
        </ul>                    
      </form>

I have problem with POST data - nothing is sended in "text" and "title" (all in paper-input).

I modified the template and attribute "name" now is in one div, which Polymer created. But no data are sent.

print_r($_POST); shows me only this: Array ( [form_id] => 837299 [submit] => Submit )

Anybody knows how use Polymer and Material UI on form?

score 10 · Accepted Answer · edited May 23 '17 at 10:28

10

Only elements that extend native form elements automatically get submitted with forms. paper-input extends core-input which has an input inside it as opposed to extending it. See this mailing list discussion for additional discussion and this StackOverflow post for possible solutions.

Something like this jsbin maybe?

Update: Here's the same thing in web component form.

Update: Looks like the creator of ajax-form has added this functionality.

Update: Also consider using iron-form.

edited May 23 '17 at 10:28

Community

1
1

answered Jun 28 '14 at 19:40

CletusW

3,890
1
27
42

1

In first link I find why I have a problem - text and title is in shadow-root and this is not sending in POST data.. And jsbin looks good! Thx – Vojtech Cerveny Jun 29 '14 at 00:08
1

Awesome! FYI, the Polymer team is reportedly working on a `paper-form` element that may solve this problem automatically. – CletusW Jul 22 '14 at 16:37
1

Looks like `paper-form` development is stalled (no commits since August). The recommended way to submit Polymer custom form fields continues to be `ajax-form`. Disclaimer: I'm the author of `ajax-form`. – Ray Nicholus Nov 28 '14 at 17:45
1

Polymer's [`iron-form`](https://elements.polymer-project.org/elements/iron-form) covers most (if not all) features of `ajax-form`. Also, it looks like `ajax-form` depends on an obsolete version of Polymer. – tony19 Jun 13 '16 at 00:03
2

"ajax-form is obsolete. Use iron-form instead" I disagree. iron-form is lacking a _lot_ of the capabilities that ajax-form has had for ages. Plus, iron-form is tied to Polymer. ajax-form has no dependencies. – Ray Nicholus Aug 14 '16 at 16:15
@tony19 iron-form is lacking quite a few features that ajax-form includes. Also, ajax-form has no dependencies, while iron-form depends on Polymer. – Ray Nicholus Aug 14 '16 at 16:17

hobberwickey · Answer 2 · 2015-04-14T18:44:40.127

According to the Polymer docs the way to do this is to just create a regular form input and wrap it in the <paper-input-decorator>

https://www.polymer-project.org/docs/elements/paper-elements.html#paper-input

I've tried it out and it works fine. Some better form support would be cool, but oh well. This stuff still kind of rocks.

UPDATE: I've built a bower package (polymer-rails-forms) to deal with forms in polymer, tailored specifically to the ActiveRecord input naming scheme but it will work with any old form really. It's still relatively new, but it covers most input types, basic validations, xhr and non-xhr submits and has a couple cool extras like image, json, and location* fields.

the location fields depend on the Google Map Places API

Polymer + form POST data

2 Answers2

Linked