Polymer iron-form post questions
Asked Answered
T

3

15

I have been trying to use iron-form with a post method and i have some doubts on how does it works or even if I should be using it at all in some cases. So I am trying to find the answer to the following questions:

  1. From what I understand, iron-form is only used for Ajax requests, so to make a regular post (that refreshes the page), I should not be using it, right? (True/False)

  2. If I do not use the is='iron-form', is there any other way to validate fields for paper-input for example?

  3. (Now this is what confuses me the most.) Using the iron-form with the post method, I only get the form data as "formData: [object Object]", which makes things totally useless on the backend that does not get the form element values ever.

    Such behaviour can be seen on the iron-form demo page https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html

    Is there any way to send a post using iron-form and keep the regular post behaviour?

On searching on StackOverflow, this thread seems to take care of a similar problem Sending form with POST method and Polymer iron-form?, although the 'fix' did not work for me as I seem to be using the 1.0.8 version.

bower iron-form#^1.0.0 validate 1.0.8 against git://github.com/PolymerElements/iron-form.git#^1.0.0

The reason for the formData: [object Object] So it seems that the problem is solved in iron-ajax#1.0.4 I am using bower with PolymerElements/iron-elements as a dependency that only bumps until the version 1.0.0 of iron-ajax, once i forced iron-ajax to use v1.0.4 the the Payload from the form post seems to be corrected.

This issue is what drove me there https://github.com/PolymerElements/iron-ajax/pull/80

Topsail answered 13/8, 2015 at 16:41 Comment(1)
on #3 see github.com/brittanyarthur/Server-Side-Code-dynamic-website-/… 'processPost' and-or 'processForm' methods for nodejs consuming a POSTAishaaisle
T
2

The reason for the point 3) in which iron-form passed formData: [object Object]

So it seems that the problem is solved in iron-ajax#1.0.4 I am using bower with PolymerElements/iron-elements as a dependency that only bumps until the version 1.0.0 of iron-ajax, once i forced iron-ajax to use v1.0.4 the the Payload from the form post seems to be corrected.

This is the issue that drove me there https://github.com/PolymerElements/iron-ajax/pull/80

Topsail answered 18/8, 2015 at 16:11 Comment(0)
P
2
  1. This is entirely up to your use-case. If you want the page to reload after a post success, one way to do that would be to use the iron-ajax on-response method and just call a function that refreshes the page

html

<iron-ajax
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handle-as="json"
    on-response="handleResponse"
    debounce-duration="300"></iron-ajax>

js e.g. something like

function handleResponse(){ location.reload(); }

or you could use this idea from robdodson and duplicate all of your form inputs, having each polymer element binding data into a matching hidden regular form element.

  1. There's a bunch of ways, here is one http://plnkr.co/edit/2C7KmE?p=preview

    <numbers-input></numbers-input>
    
    <polymer-element name='numbers-input'>
      <template>
        <paper-input-decorator id='myPaperInput' label='Number' error='numbers only' floatingLabel autovalidate>
          <input is='core-input' pattern='^[0-9]*$'>
        </paper-input-decorator>
      </template>
      <script>Polymer();</script>
    </polymer-element>
    
  2. hmm, not sure about the cause of that. Seems a bad demo/bug. I took a look at the source code but didn't see anything obvious. I wonder if iron-ajax is actually required or something? https://elements.polymer-project.org/elements/iron-ajax could be

Pneumonectomy answered 16/8, 2015 at 20:7 Comment(2)
Thank you for your input, although point 2) was a great insight you seem to be using polymer 0.5 but i think the technique can easily be applied to 1.0 Regarding point 3) that seems to be kind of a bummer, not only happening with the demo but the component itself as i get the same results, meaning no post data in the post itselfTopsail
Yeah, your question intrigued me since I've been really wanting to play around more with polymer after I/O this year but keep putting it off. Hope this helped!Pneumonectomy
T
2

The reason for the point 3) in which iron-form passed formData: [object Object]

So it seems that the problem is solved in iron-ajax#1.0.4 I am using bower with PolymerElements/iron-elements as a dependency that only bumps until the version 1.0.0 of iron-ajax, once i forced iron-ajax to use v1.0.4 the the Payload from the form post seems to be corrected.

This is the issue that drove me there https://github.com/PolymerElements/iron-ajax/pull/80

Topsail answered 18/8, 2015 at 16:11 Comment(0)
C
2

@2: on any paper-input or iron-input you can call validate() whenever you want to force validation. You can also use custom validators on your inputs.

Cockerham answered 21/8, 2015 at 12:54 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.