Submitting Forms with Polymer Elements (Still) Doesn't Work

While working through the remaining errata for Patterns in Polymer, I came across one that states that you can put a vanilla form inside of a Polymer element and expect that it should form-submit to an HTTP server like any other form. I honestly do not know that I have ever thought to do that, let alone try it. Now is as good a time as any.

I did research submitting a Polymer element as part of a normal form. That is, the Polymer element is some kind of super date picker and it is embedded in a vanilla HTML form. The expectation was that <input> fields within the Polymer element would be submitted along with any other form data on the page. As I found, this was not the case—the Polymer data was not submitted. In the end, I came up with a MutationObserver workaround, which served as the basis for a chapter in the book.

So first things first, with the latest versions of the JavaScript version of the library and with Polymer.dart, does submitting forms that contain Polymer elements with <input> elements now work?

I am still working with the sample form that looks like:



The first and last text <input> fields are defined in the HTML of the main page while the middle <input> is defined inside the very simple <hello-you> element:



But, if I enter data in all text <input> fields and submit the form, only the form elements that are part of the main document's HTML are submitted:

plain_old_param:plain
distributed_param:projected

And, loading this up in the JavaScript version, I find the same thing.

So you cannot submit a normal HTML form with a Polymer element that contains its own <input> tags. The MutationObserver approach is still needed. A bit of a bummer, but I confess that I relieved that I do not have to rewrite the chapter!

That said, this was not what the errata report specifically addressed. Said reviewer indicated that, if the Polymer element contained both the <form> and the <input>, then submitting it should work just fine.

And, indeed, that does work. I copy the HTML from the page into the <template> of my Polymer element:

<polymer-element name="hello-you">
  <template>
    <form action="test" method="post">
      <h1>Plain-old Form</h1>
      <input type=text name="plain_old_param" placeholder="Plain-old form field">
      <input type=submit value=Play>
    </form>
  </template>
  <script type="application/dart;component=1" src="hello_you.dart"></script>
</polymer-element>

When I fill out that plain_old_param text <input> and submit the <form> contained entirely inside the Polymer element, I find that it is submitted:

plain_old_param:asdf

And, when I try the same approach in the JavaScript version, I find the same results.

So in the end, not much needs to change in that chapter. In my opinion, Polymer elements that serve as <input> fields are a more likely use-case than a Polymer element that contains an entire <form>, so the chapter seems a very worthwhile one to include in the book. Still, I go back to rework the wording a little to (hopefully) make the use-case clearer.


Day #38

‹prev | My Chain | next›